HTML - Learning Tutorial

Why learn HTML?

Every webpage you look at is written in a language called HTML. You can think of HTML as the skeleton that gives every webpage structure. In this course, we'll use HTML to add paragraphs, headings, images and links to a webpage.

Basic HTML tags
Heading
Paragraph
Line Break
Centering Content
Bold
Horizontal Lines
Preserve Formatting
Nonbreaking Spaces

Difference between HTML tag and Element

HTML Tag vs. Element
An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag.
For example <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element.

Core attributes in an Element
id
title
class
style

Explain - The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration helps the browser to display a web page correctly.
There are different document types on the web.
To display a document correctly, the browser must know both type and version.
The doctype declaration is not case sensitive. All cases are acceptable:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

Styling HTML with CSS - In brief

CSS stands for Cascading Style Sheets
Styling can be added to HTML elements in 3 ways:
Inline - using a style attribute in HTML elements
Internal - using a <style> element in the HTML <head> section
External - using one or more external CSS files
The most common way to add styling, is to keep CSS syntax in separate CSS files.

HTML Images Syntax

In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute defines the url (web address) of the image:
<img src="url" alt="some_text">

How to Embed Multimedia in HTML

The easiest way to add video or sound to your web site is to include the special HTML tag called <embed>. This tag causes the browser itself to include controls for the multimedia automatically provided browser supports <embed> tag and given media type.
You can also include a <noembed> tag for the browsers which don't recognize the <embed> tag. You could, for example, use <embed> to display a movie of your choice, and <noembed> to display a single JPG image if browser does not support <embed> tag.

HTML - Learning Tutorial

rh banner

Sunday, 4 January 2015