index<--

HTML Tags

Page Bookmarks

Text-related Tags

Text can be organized on a web page like it is in a book or magazine. The simplest technique is to use headers and paragraphs. A header is similar to a chapter name or sub-title, and it usually uses larger characters or a different font to stand out. A paragraph can contain several sentences and always starts on a new line. It can span several lines and can start with a larger letter or be indented. In HTML, hyphenation can happen automatically, so we don't have to worry about it.

Headers & Paragraphs:

Both header and paragraph tags are block tags, and their contents can span several lines of text. The header tag is usually a short text or a single line. The paragraph tag is usually larger and can contain multiple sentences. Within a paragraph, the font usually doesn't change, but the text's appearance can be emphasized using text decoration tags.

<h1>Title</h1>
<h2>Subtitle</h2>
<p>paragraph text</p>

Decoration tags:

These tags are inline tags. That means we can use these tags to mark a small portion of text inside a block of text. Unlike the block tags, these tags do not break the line so you can use many in a single line of text.That is the difference between the two kind of tags you need to remember in case someone ask.

<i>this is italic text</i>
<b>this is bold text</b>
<u>this is underlined text</u>
<del>this text is strike through</del>
<br> <!-- this is used to create a new "line break".--> 

HTML Rendering Output:

Reading and interpreting the HTML is called "parsing" and "rendering". The fragment above will look different after rendering. More specific:

Note: In a WYSIWYG HTML editor we have shortcuts for these things. CTRL+I, CTL+B, CTRL+U. You mark the text and press the shortcut to create the inine tags automaticly.

User enumerations

Sometimes we can enumerate several ideas one under another. These ideas can be nested so we have categories and subcategories of ideas. For example we can create a table of content. We enumerate all the chapters in the book. This can be ordered (using a number or a symbol) or can be un-ordered (using a small dot or a circle in front of the text.

Ordered List

1. <ol>….</ol> (Used one time to contain one ordered list)
2. <li> … </li> (Used multiple times to contain one list item)

Unordered List

1. <ul>….</ul> (Used one time to contain one un-ordered list)
2. <li> … </li> (Used multiple times to contain one list item)

Example:

The example below has two lists. You can open this example and study it on-line on the codepen.io website. This is how we can practice HTML and understand it better.

<h1>Unordered List </h1>
<ul>
   <li>first item</li>
   <li>second item</li>
   <li>third item</li>
</ul>
<h1>Ordered List </h1>
<ol>
   <li>first item</li>
   <li>second item</li>
   <li>third item</li>
</ol>

Homework: Open with codepen.io: HTML List Element

Using attributes

Some elements have attributes. These may be style attributes but sometimes the attribute can link to external files or resources. In case of element "img" the attribute src="" specify image location.

Example:

<img src="img/page-source.jpg" width="400"/>

Notes:

• Element <img> is self-closing. It does not have any content,
• Attribute src represent the content, it may be a relative URL or full URL,
• Attribute alt is useful when the source URL is not available,
• With attribute will resize image. The height can also be specified.

Global Attributes

These attributes are common to all HTML elements; they can be used on any element, though they may have no effect on some elements. Each element has several important attributes for its particular usage.

The most important 3 attributes:

1. The id: Defines an identifier unique in the whole document. It can be used to create links, scripting, or styling for a particular element,
2. The class: A space-separated list of the classes of the element. Classes enable CSS selectors to access specific elements,
3. The style Contains CSS styling for the element. It is recommended for styles to be defined in a separate CSS files.

Reference: MDN Global attributes

Hyperlinks

Remember HTML stands for Hypertext Markup Language? One property of HTML is that allows it to point towards another HTML page. This is realized with "link". It looks like a blue text, sometimes underlined or other color. If you click this text it will open another web location.

To create a link you must use a special tag: … (anchor). This tag contains the text. The link attribute will contain the URL of the new location. There are other attribute specific to element:

• href="URL", specify the address of new location,
• target="_blank", load URL in a new tab,
• target="_parent", load URL in a parent of current tab.

Example:

<a href="https://sagecode.pro" target="_blank">my home page</a>

Anchors

An anchor is very similar to a link, that you can use as a bookmark. When you use an anchor in URL, the target page opens and scroll down automatically to specified anchor. An anchor can be invisible, or it can have a representation. It can be a hyperlink or an image. To create an anchor you use tag with mandatory "id" attribute.

Making anchors: These is what you use to create a link for it:

1. Set-up an #id for an invisible anchor:

<a id="test"/> 

2. Making an anchor that is also a link to itself in the same time:

<a id="test" href="#test">test anchor</a> 

3. Making a hyperlink for the anchor using hash tag "#test"

<a href="#test"/>"go to test"</a> 

4. Making a header target for a bookmark "#target"

<h2 id="target">Target Header<h2>

Homework:

Next examples is an external links to HTML code stored on: codepen.io website. If you click, a new window will be opened in your browser with the example. You can open and run this example to understand what is happening.

• Codepen Example:  HTML Anchor & link
• Documentation:  MDN Anchor Attributes

Container Elements

The HTML Content Division element represented by tag: "div" is the generic container that can be used to encapsulate some content. It has no effect on the content or layout until is styled using CSS cascade style sheet. This element has become very popular to organize your content on a web site.

Example:

In this example, the "div" element has "class" attributes, that can be used in CSS.

<div align="center">
 <img src="images/ledy-bug.png" alt="Insect"  style="border:solid; border-radius:10px;">
 <p>Leady Bug</p>
</div>

If you render the previous example you will get this image:

Leady Bug

Using CSS:

You do not know yet CSS, you will learn it later, but this is how it looks like:

.rect {
    border: solid 2px;
    width: 20em;
    box-shadow: 8px 8px 5px #444;
    border-color: silver;
    border-radius: 16px;
    padding: 8px;
    text-align: center;
}

Homework: Open with codepen.io:  HTML: Bug image

• The <div> element should be used only when no other semantic element (such as <article> or <nav>) is appropriate;
• Div element like most other elements have common attributes available to be used;
• The align attribute is obsolete. Use CSS Grid to replace this attribute.

Span element

This is a generic inline container for content separation. It can be used to group elements for styling using the class or id attributes. Unlike paragraph "p" or "div" elements, that are block element, span is an inline element used for text fragments similar to bold <b> or italic <i>.

Example:

<p>This is a <span style="color: #ff00ff;">generic inline container</span> for content separation.</p>

Note: I previous example I have used "span" tag with "style" attribute to change color style of text: "generic inline container". I could have associate a class to "span" tag and use CSS. Most designer prefer to use CSS for style and avoid "style" attribute.

HTML5 video Element

The newly introduced HTML5 <video> element provides a standard way to embed video in web pages. The video element is relatively new, but it works in most of the modern web browsers.

The following example simply inserts a video into the HTML document, using the browser default set of controls, with one source defined by the src attribute.

<video controls="controls" src="../html/media/demo.mp4">
    Your browser does not support the HTML5 Video!
</video>

Example:

You can see this element in action below. Of course the example is also using Bootstrap to establish the size of the media. You can inspect this example by hovering mouse over the image then open popup menu by: right click -> Inspect Element.

Iframe:

Next resource explains how to use external videos using iframe element with Bootstrap. This is a CSS style framework that can help you create responsive layouts and style your pages. For details visit: mdbootstrap.com/docs

Read next: HTML Tables