HTML: Basic Grammar-5-Links

Computer, HTML

HTML

The language we use maps the world. This page is a vocabulary key. The key will provide the grammar to understand the basics of HTML. After understanding the language, creating web pages are done easily.

Etymology and Cognitive Synonyms (synsets)

Why you begin with the history of the word and cognitive synonyms?

The birth place of words are in peoples minds. They become the blocks we use to build what we see, hear, taste, touch and smell (our senses). When you read you are condensing your senses into a chain of links from a set of symbols. These visible symbols are the anchors you chunk into your vocabulary to name your thoughts and beliefs.

The purpose of reading a list of the history of a word is to build your relationship as the word grew-up in time. The family origins of a word connects the anchor to the chain of how the words story sprouted in someones mind.

The cognitive synonyms (synset for short) are the present sprouted offspring of the word. They provide you with fresh mental anchors to the chain of the words story.

Read the groups of words to see their birth.

Connect with the anchors to the story of the words to see how they’ve grown.

link
lenken; origin: German
to bend, turn, lead.
link; synset:
the state of being connected.
anchor
ankyra; origin: Greek:
hook.
anchor; synset:
a source of support and stability
resource
resurgere; origin: Latin
rise again.
resource; synset:
a source that may be drawn upon when needed.
title
titulus; orgin: Latin
a label.
title; synset:
a general or descriptive heading.
id (identiy)
idem; origin: Latin
the same
identity; synset:
the individual characteristics by which a thing or person is recognized or known.
class
classis; origin: Latin
a division; army, fleet.
class; synset:
a group sharing a common quality.


Learn By Doing

  • Open Favorite text editor and create a new .html file.
  • Create HTML Basic Document Structure
  • Create an <h1> element labeled as Poem.
  • Wrap the <a> tag with the href being: “https://en.wikipedia.org/wiki/Poetry” around the word poem as your resource link.
  • In the body container create an unordered list using the <ul> element. Don’t forget to close the tags.
  • In the unordered elements; place a list of your top 3 favorite poems between the <li> tags.
  • Save file and open in browser to view.
  • Click the link created on your page.
  • Notice anything different?

HTML: Basic Grammar-4-Images

Computer, HTML

HTML Images and Figures

The language we use maps the world. This page is a vocabulary key. The key will provide the grammar to understand the basics of HTML. After understanding the language, creating web pages are done easily.

Etymology and Cognitive Synonyms (synsets)

Why you begin with the history of the word and cognitive synonyms?

The birth place of words are in peoples minds. They become the blocks we use to build what we see, hear, taste, touch and smell (our senses). When you read you are condensing your senses into a chain of links from a set of symbols. These visible symbols are the anchors you chunk into your vocabulary to name your thoughts and beliefs.

The purpose of reading a list of the history of a word is to build your relationship as the word grew-up in time. The family origins of a word connects the anchor to the chain of how the words story sprouted in someones mind.

The cognitive synonyms (synset for short) are the present sprouted offspring of the word. They provide you with fresh mental anchors to the chain of the words story.

Read the groups of words to see their birth.

Connect with the anchors to the story of the words to see how they’ve grown.

image
imago; origin: Latin
idea, appearance.
stem: imitari; origin: Latin
to copy, imitate
image; synset:
a visual representation (of an object or scene or person or abstraction) produced on a surface.
source
surgere; origin: Latin
to rise.
source; synset:
the place where something begins, where it springs into being.
alternative
altenatus; origin: Latin
one after the other.
from alter; origin: Latin
the other.
alternate; synset:
serving or used in place of another.
figure
figura; origin: Latin
a sketch, drawing.
figure; synset:
a diagram or picture illustrating textual material.
caption
capito; origin: Latin
a catching, seizing, holding, taking.
From 17c. used especially in law, and there via its appearance at the head of legal document involving seizure (“Certificate of caption”, etc.), the word’s sense was extended to “the beginning of any document;” thus “heading of a chapter or section of an article” (1789), and, especially in U.S., “description or title below an illustration” (1919).
caption; synset:
brief description accompanying an illustration.

What are <img> elements?

tag that represents an image in the HTML document.

What is the <img> element syntax?

<img src=” ” alt=” “>
src- image url source.
alt- attribute used to provide an alternative text discription of the image when the image doesn’t display.
<img> path example: <img src=”img/image.jpg ” alt=”example of the image path structure”>

What is the <figure> element?

container element for images that represents self contained content.

What is the <figcaption> tag?

represents a caption associated with a figure.


Learn By Doing

  • Open Favorite text editor and create a new .html file.
  • Create HTML Basic Document Structure
  • In the body container create 3 figure container elements: <figure> element. Don’t forget to close the tags.
  • Download and save the image in an image folder your top 3 favorite Philosphers (use wikimedia).
  • In the first figure container:
    1. create <h3> element with Name of Philospher between tags.
    2. create <img src=”img/saved-image.jpg” alt=”name-of-philosopher”>
    3. create a <figcaption> element with the name of the Philosophy Created between the tags.
  • Repeat the steps for the remaining figure containers.
  • Save file and open in browser to view.
  • Go to the first figure container:
    1. go to img tag.
    2. delete the image path.
    3. save file and view in browser.
    4. notice anything different?
    5. insert image path back.
    6. save file and view in browser.

TOR: Basic Grammar-1-Install TOR

Security

TOR: Grammar Stage

The language we use maps the world. This page is a vocabulary key. The key will provide the grammar to understand the basics of setting up the TOR browser. After understanding the language, using an anonymous browser will be part of your web browsing experience.

Etymology and Cognitive Synonyms (synsets)

Why you begin with the history of the word and cognitive synonyms?

The birth place of words are in peoples minds. They become the blocks we use to build what we see, hear, taste, touch and smell (our senses). When you read you are condensing your senses into a chain of links from a set of symbols. These visible symbols are the anchors you chunk into your vocabulary to name your thoughts and beliefs.

The purpose of reading a list of the history of a word is to build your relationship as the word grew-up in time. The family origins of a word connects the anchor to the chain of how the words story sprouted in someones mind.

The cognitive synonyms (synset for short) are the present sprouted offspring of the word. They provide you with fresh mental anchors to the chain of the words story.

Read the groups of words to see their birth.

Connect with the anchors to the story of the words to see how they’ve grown.

technique
tekhne; origin: Greek
art, skill, craft in work.
technique; synset:
a practical method or art applied to some particular task.
routing
rupta (via); origin: Latin
(a road) open by force
route; synset:
send via a specific route.
anonymous
anonymos; origin: Greek
without a name
from: an- “without” + onyma (onoma) “name”
anonymous: synset:
having no known name or identity or known source.
communication
communicare; origin: Latin
to make common.
communicate; synset:
transmit information.
network
nodus; origin: Latin
knot.
net-like arrangement of threads, wires, etc.
from: net ” + work
network; synset:
an interconnected system of things or people.
messages
mittere; origin: Latin
to send.
message; synset:
what a communication that is about something is about.
encrypt
origin: Latin
en “in” + crypt “hidden, secret”
encrypt; synset:
convert ordinary language into code.
node
nodus; origin: Latin
knot.
node
a connecting point at which several lines come together.

What is Onion Routing?

A technique for anonymous communication over a computer network.

How are messages sent?

Messages are repeatedly encrypted and then sent through several “network nodes”.
The name of the nodes are called Onion Routers.

How do Onion Router work?

The metaphor normally used when thinking of “how” onion routers work: Imagine someone peeling an onion, every layer is an encrypted message containing routing instructions.

  1. Each onion router removes a layer of encryption to uncover routing instructions.
  2. Then: sends the message to the next router.
  3. Then: Loop begins; Repeat Steps.

Why so many steps?

each step prevents intermediary nodes from “knowing” the origins destination and contents of the message.

What is TOR?

TOR
the onion routing
TOR is open source software.

Why use TOR?

  • TOR protects the personal privacy of the user.
  • TOR enables online anonymity.
  • TOR helps users resist censorship.
  • TOR provides freedom and ability to communicate confidentially.

Why is anonymity important?

Allows users locations not to be discoverable by “anyone.”

How does TOR provide online anonymity?

TOR directs traffic through a “free”, “worldwide”, “volunteer” network.


Learn By Doing

Install TOR Browser

  1. Download and Install TOR
    • Use the latest release version of TOR.
    • TOR comes configured as a client by default.
    • You shouldn’t need to change any of TOR Browser settings.
  2. TOR is now installed on your computer.
  3. Extract TOR Bundle from Download folder.
  4. Open tor-browser
  5. Double Click start-tor-browser to Start browser.
  6. Read Torify How To.
  7. Happy Anonymous Browsing.

HTML: Basic Grammar-3-Lists

Computer, HTML

HTML Syntax

The language we use maps the world. This page is a vocabulary key. The key will provide the grammar to understand the basics of HTML. After understanding the language, creating web pages are done easily.

Etymology and Cognitive Synonyms (synsets)

Why you begin with the history of the word and cognitive synonyms?

The birth place of words are in peoples minds. They become the blocks we use to build what we see, hear, taste, touch and smell (our senses). When you read you are condensing your senses into a chain of links from a set of symbols. These visible symbols are the anchors you chunk into your vocabulary to name your thoughts and beliefs.

The purpose of reading a list of the history of a word is to build your relationship as the word grew-up in time. The family origins of a word connects the anchor to the chain of how the words story sprouted in someones mind.

The cognitive synonyms (synset for short) are the present sprouted offspring of the word. They provide you with fresh mental anchors to the chain of the words story.

Read the groups of words to see their birth.

Connect with the anchors to the story of the words to see how they’ve grown.

list
leizd; origin: Proto Indo European
border, band.
list; synset:
a database containing an ordered array of items (names or topics).
unordered
inordinatus; origin: Latin
not arranged.
unordered; synset:
not arranged in order hierarchically.
order
ordinem; origin: Latin
row, rank, series, arrangement.
order; synset:
marked by an orderly, logical, and aesthetically consistent relation of parts.
description
describere; origin: Latin
write down, transcribe, copy, sketch.
de- “down” + scribere “write down”
description; synset:
a statement that represents something in words.
nesting
nidah; cognates: Sanskrit
resting place, nest.
nest; synset:
fit together or fit inside.

What are HTML lists?

Lists are groups of related data.

Why are HTML

  • Lists group related pieces of information together.
  • Lists create:
    • a well-structured document.
    • a more accessible document.
    • an easy to maintain document.
  • Lists are a workhorse element used for navigation as well as general content.

What are the 3 types of HTML lists?

“<ul>”
unordered list

group a set of related items in no particular order.
“<ol>”
ordered list

group a set of related items in a specific order.
“<dl>”
description list

display name/value pairs such as definitions, or times and events.

What is nesting list?

nesting
list items can contain another “entire list”.

What is the list syntax?

Unordered List

<ul>
<li>Insert Line Item</li>
</ul>

Ordered List

<ol>
<li>Insert Line Item</li>
</ol>

Description List

<dl>
<dt>Insert Name</dt>
<dd>Insert Value</dd>
</dl>

What is the algorithm to determine what list type to use?

if: defining terms or associating other name/value pairs is important
then: use a description list.
if: the order of the list items important
then: use an ordered list
if: the order of the list items are “not” important
then: use an ordered list


Learn By Doing

  • Open Favorite text editor and create a new .html file.
  • Create HTML Basic Document Structure
  • In the body container create 3 different list blocks: <ul>, <ol>, <dl> element. Don’t forget to close the tags.
  • In the unordered and ordered elements; place a list of your top 3 favorite poems between the <li> tags.
  • In the description element; place the name of the poem in the <dt> tag and the name of the author in the <dd> tag.
  • Save file and open in browser to view.
  • Create a comment in your html document pertaining to what each of the poems means to you.
  • Notice anything different?

HTML: Basic Grammar-2-Syntax

Computer, HTML

 

 

 

 

HTML Syntax

The language we use maps the world. This page is a key. The key will provide the grammar to understand the basics of HTML. After understanding the language, creating web pages are done easily.

Etymology List

Why you begin with the history of the word and cognitive synonyms?

The birth place of words are in peoples minds. They become the blocks we use to build what we see, hear, taste, touch and smell (our senses). When you read you are condensing your senses into a chain of links from a set of symbols. These visible symbols are the anchors you chunk into your vocabulary to name your thoughts and beliefs.

The purpose of reading a list of the history of a word is to build your relationship as the word grew-up in time. The family origins of a word connects the anchor to the chain of how the words story sprouted in someones mind.

The cognitive synonyms (synset for short) are the present sprouted offspring of the word. They provide you with fresh mental anchors to the chain of the words story.

Read the groups of words to see their birth.

Connect with the anchors to the story of the words to see how they’ve grown.

syntax
syntaxis; origin: Greek
a putting together or in order, arrangement, a grammatical construction.
from: syntassein; “to put in order”
syn- “together” + tassein “arrange”
attribute
attributus; origin: latin
assign to, add, bestow
ad- “to” + tribuere “assign, give, bestow”
modifier
modificare; origin: latin
to limit; measure off, restrain.
mode- “measure” + facere “to make”
comment
commentum; origin: latin
comment, interpretation.
from: comminisci “to contrive, devise,”
com- “with, together,” + meminisse “to remember”
base word: meminisse “to remember”
meminisse related to: mens; (mentis) “mind”
entity
entitis; origin: latin
“a thing”
from Greek: einai “to be”

What is the syntax of HTML elements?

HTML syntax is simple. The fundamental elements of complete tag: <tag>content</tag>

  • <tag>= opening tag
  • </tag>= closing tag (note the “/” is needed to close tags)
example:
<p>This is the paragraph tag.</p>

What is an HTML attribute?

a modifier of an element.

What is the syntax for HTML attributes?

appears as “name=”value” pairs (separated by an “=” sign)
syntax: <tag attribute=”value”>content to modify</tag>

How are comments embedded in HTML?

comment syntax:
<!– insert comments –>

Why are comments used?

  • leaving reminders.
  • explains sections of markup.
  • leaving notes.

What are HTML entities?

special characters that are used in HTML markup.

Why use HTML entities?

entities allow the use of characters in an HTML document that are normally hard to impossible to input using the keyboard.

What is the special character entity syntax structure?

HTML character entity syntax:

  • &- “ampersand introduces the reference”
  • ;- “semi-colon ends it.”

What are the 4 most common named character entities?

&lt;
displays (<)less than character.
&gt;
displays (>) greater than character.
&amp;
displays (&) ampersand character.
&quot;
displays (“) double quote.

What are block-level elements?

block level elements span the entire width of their parent element.
block level elements start on a new line.

examples of common block level elements:

  • <div>DIV element is a block level element.</div>
  • <p>Paragraph element is a block level element.</p>

What are inline level elements?

inline level elements are nested inside block-level structural elements.
inline level elements won’t start a new line.

Short quotes inline level element:

<q> = short quotations
places quotation marks around markup.
cite attribute can be used to link to source where quote can be found.

HTML has 4 inline level elements to signal emphasis to the users.

Examples for when to use emphasis elements:
  • text needing to display warnings or differences in meaning.
  • visual browser would display the text in different styles.
  • screen readers users would hear different audio effects.
<em>
represents a subtle change to the sentence meaning.
<i>
represents text in an alternate voice.
<strong>
represents strong importance of content.
<b>
represents content stylistically to offset from the rest of the content.


Learn By Doing

  • Open Favorite text editor and create a new .html file.
  • Create HTML Basic Document Structure
  • In the body container create a <p> element. Don’t forget to close the tag.
  • Place your favorite poem between the paragraph tags.
  • Save file and open in browser to view.
  • Create a comment in your html document pertaining to what the poem means to you.
  • Use the <q> element around the 1st line in the poem. Save file and view.
  • Use the <em> element around the 2nd line in the poem. Save file and view.
  • Use the <i> element around the 3rd line in the poem. Save file and view.
  • Use the <strong> element around the 4th line in the poem. Save file and view.
  • Use the <b> element around the 5th line in the poem. Save file and view.
  • Notice anything different?