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