HTML basic syntax
I just had to take the hypertext idea and connect it to the TCP and DNS ideas and – ta-da! – the World Wide Web.
- The Hypertext Markup Language (HTML) was present in the document sharing system that Berners-Lee developed at CERN in the early 1990’s.
- The HTML Working Group, created by the IETF, released HTML 2.0 as a standard in 1995, and stated that it was the first HTML specification intended to be treated as a standard against which future implementations should be based.
- Since then, additional versions of this standard have been created under the auspices of the W3C.
- HTML5 incorporates new features such as video playback and drag-and-drop capabilities.
There is a design principle related to publishing entitled separation of content and presentation — the meaning (i.e., semantics) of a document should be separated from how this meaning is presented to readers.
Advantages associated with using this design principle:
- – The same content can be rendered differently, depending upon the needs of the user (e.g., as text, as braille, etc.).
- – You can change in one place how a recurrent item in the document is styled (e.g., section headings), and the change will be reflected throughout the entire document. Indeed, the entire graphic design of a document can be updated/changed in this way.
- – By capturing the meaning of a document, further intelligent machine processing of the document is supported. E.g., give me all of the emphasized words in a document, all of the level one headings, etc.
Markup languages are examples of declarative programming languages:
- – Program flow control is not specified.
- – Programs specify what not how
In the case of markup languages such as HTML, this means that you specify what should appear on a webpage, but not how it should look (i.e., how it’s styled) or behave (e.g., when it’s visible, animations).
If created properly, HTML documents should follow the separation of content and presentation principle.
Example: HTML –
<div> <h1> Introduction </h1> </div>
HTML - Elements, Tags and Attributes
Each individual component in an HTML document is represented by an HTML element.
An HTML document is structured as a tree of elements.
An HTML element consists of
- A start tag that must contain the element's name, and may also contain additional attributes.
- An end tag that matches the name provided in the start tag.
- The content that may appear between the start and end tags.
<div id="main-panel"> <h1> Introduction </h1> </div>
Elements may appear nested inside of other elements.
<div id="main-panel"> <h1> Introduction </h1> <h2> Introduction </h2> </div>
h2 elements are nested inside the
div element , so
h2 are the children of
div , and div is the parent of
These parent-child relationships lead to the tree structure of HTML documents.
Note: A listing of all available HTML tags can be found at:www.w3schools.com/tags/
Attributes give elements additional meaning and context.
Attributes appear as a list of name-value pairs inside the start tag, where the value must be enclosed in quotes, and the name and value are separated by an equal sign.
<div id="main-panel" class="modern"> <h1> Introduction </h1> </div>
All HTML elements support the id attribute (i.e., it’s a global attribute). An
id must be unique within an HTML document.
Another global attribute is
class, which can be applied to a collection of elements.
One of the most important HTML elements is the anchor,
<a> . It is used to create hyperlinks.
<a href='http://www.amazon.com'>Amazon </a>The
hrefattribute is used to specify the hypertext reference, i.e., the link. This will produce a link that looks something like Amazon.
Event attributes may be attached to an anchor element – a script is called when the event occurs. These may include window, form, keyboard, mouse or media events.
<a href='http://www.amazon.com' onmouseover='notice.js'>Amazon </a>
In earlier versions of HTML, a number of formatting elements found their way into the specification. E.g., you could specify the font that should be using in a particular h1 heading.
<h1> </font face='arial' size='20' color='#ffffff'> Introduction </font> </h1>
This clearly breaks the separation of content and presentation principle.
This was recognized, and as a result a number of these types of tags are listed as “Not Supported in HTML5.” Instead, you are directed to use CSS.
- Dependency injection
- Directives and Pipes
- Data binding
- HTTP Get vs. Post
- Node.js is everywhere
- MongoDB root user
- Prefer Async Script Loading
- Components, Bootstrap and DOM
- What is HEAD in git?
- Show the changes in Git.
- What is AngularJS 2?
- Confidence Interval for a Population Mean
- Accuracy vs. Precision
- Sampling Distribution
- Working with the Normal Distribution
- Standardized score - Z score
- Evaluating the Normal Distribution
- What is Nodejs? Advantages and disadvantage?
- How do I debug Nodejs applications?
- Sync directory search using fs.readdirSync