HTML: Basic Grammar-7-Forms

Computer, HTML

HTML: Form

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)

How words work:

  • Words are the anchors we create to describe our concepts.
  • These anchors become our vocabulary.
  • We then use our vocabulary to describe to others our thoughts and beliefs.

Where do words come from?

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.

Why start with the history of the word and cognitive synonyms?

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 creates 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 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.

Anchors for your 5 Senses: Synsets

form; etymology:
forma; origin: Latin
contour, figure, shape; appearance, looks
an outline, a model, pattern, design; sort, kind, condition
form; synset:
a perceptual structure.
a printed document with spaces in which to write.
input; etymology:
to put in, to place, to set
input; synset:
signal going into an electronic system.
any stimulating information or event; acts to arouse action.

Putting Everything Together:

basic form structure

basic form structure

What is the <form> element?

<form>
a container element with interactive controls used to submit information to a web server.

Why use the <form> element?

To collect and store information on a web server.

What are the <form> interactive controls?

Input elements used to create interactive controls.

Why use <input> elements?

To accept data.

How do you determine the types of data collected when using the <input> elements?

The information collected in the <form> element depends on the type of attribute used in the <input> element.

What attributes (limits) can be set in the <input> element?

In this tutorial the attributes selected will be limited for the purpose of time. When you are ready to experience more, follow the link below…

Mozilla Developer Network: <input> Global Attributes.


Learn By Doing

Thought Experiment:

  • Open Favorite text editor and create a new .html file.
  • Create HTML Basic Document Structure
  • Create an <h1> element labeled as Sample Form.
  • Create a <form> element
  • Wrap 3 input types in the <form> element with the label:
    • Name:<input type=”text” name=”name”>
    • Email:<input type=”text” name=”email”>
    • Comments:<textare name=”comments” id=”comments” cols=”25″ rows=”3″></textarea>
    • Side note: These attributes will collect the information you request to store on a web server.
  • Save file and open in browser to view.

HTML: BASIC GRAMMAR-6-TABLES

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)

How words work:

  • Words are the anchors we create to describe our concepts.
  • These anchors become our vocabulary.
  • We then use our vocabulary to describe to others our thoughts and beliefs.

Where do words come from?

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.

Why start with a history of a word and cognitive synonyms?

One purpose of reading a list of a history of a word is to build your relationship as the word grew-up in time. Family origins of a word creates anchors to the chain of how a words story sprouted in someones mind.

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

Read the groups of words to see their birth.

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

Anchors for your 5 Senses:

Putting Everything Together:

What is the purpose of HTML tables?

Tables arrange and display items in rows and columns.

What is a basic table structure?

basic table HTML structure

basic table HTML structure

What does the <table> element represent?

The container element for a table.

What is the <caption> element?

Gives the table a caption to provide meaning for a user.

What is the <thead> element?

Defines a table’s head content.

What is the <tbody>?

Defines a table’s body content.

What is the <tfoot>?

Defines the table’s footer content.

What is the <tr> tag?

Represents a table row.

What is the <td> tag?

Defines a table cell in a <tr> tag.

What is the <th> element?

Defines the content as the table head titles for a tables columns.


Learn By Doing

Thought Experiment:

  • Open Favorite text editor and create a new .html file.
  • Create HTML Basic Document Structure
  • Create an <h1> element labeled as Top 3 Favorite Poem.
  • Create a basic 3 column table.
  • Define the table data and create in the table row tag place the titles of each poem.
  • Create another table row and place the year you discovered these poems.
  • Save file and open in browser to view.
  • Click the link created on your page.
  • What do you notice?

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.

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?

 

HTML: Basic Grammar-1-HTML

Computer, HTML

 

 

 

 

Hypertext Markup Language

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.

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.

What is HTML?

HTML
a system of labeling parts of a document.

Why use HTML?

to create web pages.

What are HTML elements and tags?

elements
the components of an HTML document or web pages.
tags
the name of the element surrounded by angle brackets.
example: <p>some content</p>

Basic Document Structure Elements


<!DOCTYPE html>
<head>INSERT CONTENT</head>
<body>INSERT CONTENT</body>
</html>

What is the !DOCTYPE declaration?

an instruction to the web browser pertaining to what version of HTML the page is written.

What is the <html>?

<html>….</html>
the root element.
the parent element to all other elements in the HTML document.

What is the <head>?

<head>….</head>
container element for processing information and metadata.

What is the <body>?

<body>….</body>
container element for displayable content of the HTML document.

Document head elements?

What is the <link>?

specifies links to other documents.
the link element has html attributes but no other content.
example: link to external stylesheet <link: rel=”stylesheet” type=”text/css href=”url” title=”description_of_style”>

What is the <meta>?

specifies metadata (data about data).

Types of metadata

What is structural metadata?

structural metadata:
data about the design and specifications of data structures.
data about the containers of data.

What is descriptive metadata?

descriptive metadata:
data about individual instances of application data, the data content.

What is the <script>?

a container for script instructions or link to a external script with optional src attribute.
usable in the document body to dynamically generate both block or inline content.

What is the <style>?

specifies a style for the document.
example: <style type=”text/css”>
can act as a container for style instructions or link to external style sheet
example: <@import = <style>@import url; </style>

What is the <title>?

defines a documents title.
required in every html and xhtml document.


Learn By Doing

  • Open up favorite text editor or:
    • Download: Open Source IDE (integrated developer environment)
    • link to download: Komodo IDE
  • Recreate the HTML basic document structure.
  • In body element write “Trial run”.
  • Save file with .html extension.
  • Open file in favorite browser to view process.
Link Material