Complete HTML and HTML5 Tutorial | Learn Web development with HTML | Deep Dive in HTML

Learn HTML Tutorials | Learn Web development with HTML

HTML is so easy to learn. So don't wait! Dive right in!

As programming languages uses scripts to perform different functionality similarly, HTML, Hyper Text Markup Language uses tags to differentiate kind of texts. Modern web designs consists of HTML, CSS, and JavaScript, PHP or any other back-end language. HTML develops structure for a web page, CSS standards are responsible for the presentation, and JavaScript makes the page responsive. Creating content for web consist of a basic stage of learning HTML, which is quite essential for any web professional.

This is how an HTML code looks like:

HTML TAGS

We will be learning and working with the following HTML tags, through out the article:

1. Paragraph Tag

2. Heading Tag
3. Line Tag
4. Comment Tag
5. Image Tag
6. Link Tag
7. List Tag
8. Table Tag
9. Form Tag
10. Frame Tag
11. Audio Tag
12. Video Tag
13. Progress Tag
14. many more...

HTML 5

New HTML5 Elements:

<article>, <aside>, <audio>, <canvas>, <datalist>,

<details>, <embed>, <footer>, <header>, <nav>,

<output>, <progress>, <section>, <video>, and even

more!

Forms:

- The Web Forms allows for creation of more robust forms and a much compelling UX.

- Picking of data, color, and other functionalities have been added.

- Forms consists of useful input methods such as email and search.

- Methods such as DELETE & PUT are now supported in forms.

- Integrated Application Programming Interfaces included.

- Dragging and Dropping

- Adding of Videos and Audios

- Applications comprising of off-line web.

- Consisting of History

- Local Storage of data

- Geolocation

- Web Messaging

The List of Content Models

Traditional Elements consisted either the block level or inline content. HTML5 introduces seven main content models.

- Embedded
- Metadata
- Sectioning

- Interactive

- Heading

- Flow
- Phrasing

Content Models:

Metadata: Text which represents or give an idea about the rest of the content. These elements are

found in the head of the document.

As: <base>, <link>, <meta>, <noscript>, <script>, <style>, <title>

Embedded: Importing content on the page.

As: <audio>, <video>, <canvas>, <iframe>,

<img>, <math>, <object>, <svg>

Interactive: Users interacts with these tags.

As: <a>, <audio>, <video>, <button>, <details>, <embed>, <iframe>, <img>, <input>, <label>, <object>, <select>, <textarea>

Heading:

As: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>,<hgroup>

Phrasing: 

As : <img>, <span>, <strong>, <label>, <br />,

<small>, <sub>, and more.

Sectioning content:

As : <article>, <aside>, <nav>, <section>

WORKING WITH HTML5

The <header> Element

A simple <header> tag is used for defining the header section of the web page. The <header> tag can also be used within the body tag.

The <footer> Element

Footer element is for the bottom of the web page which contains specific content about the page.

The <nav> Element

<nav> tag contains a navigations. It comprises of the navigation links as shown:

<nav> ... </nav>

The <article> Element

Any block comprising of content like blog or article containing different styles just as an article has. However, <article> tag contains different tags inside, for managing and designing the content.

The <article> element is also used on the place of division tag which is widely used in HTML.

The <aside> Element

<aside> acts as a side bar of the web page. It consists of relevant content of the page or any other extra content not directly depending on the primary content.

Audio tag

It embeds audio in a web page, as there was not proper method to embed an audio in traditional HTML.

It's one of the way to use is as follows:

it can also be embedded using the <source> tag within the <audio> tag as shown below:

<audio> tag attributes 

Controls:

It shows different audio controls such as pause, play, and other. However, it also gives feature to auto play an audio which does not require visitor's permission to start.

loop

This tag repeats audio again and again until stopped.

Videos in HTML

The embedding of videos are very similar to the embedding of an audio. <video> tag is used for embedding a video.

Attributes of <video>

Controls:

It shows different video controls such as pause, play, and other. However, it also gives feature to auto play a video which does not require visitor's permission to start.

Progress Bar

The <progress> tag shows progress bar on the web page. The progress tag can be used in different other tags such as of section, heading, and other.

It attributes are as follows:

Value: defines the completion of a task or progress bar. 
Max: shows the total or the maximum progress to consider.

Web Storages in HTML5 

Local computers can store data with the help of new features of HTML5. JavaScripts were used in order to store data or to use cookies, before. Following as the merits of web storages in HTML5.

- Increased security
- Faster

- Stores a greater amount of data

- Stored data is not sent with every server request

Web Storage Objects

There are two different sort of web storage objects:

- sessionStorage()

- localStorage()

- Session Storage no longer remain as the the user closes the web page.

- Values help to store data in local storage for longer period of time, until removed.

-The data is stored with the help of key pairs.

Geolocation API

Geolocation API is the feature for the location of the user in order to provid better results. It requires user permission in order to access location. getCurrentPosition method is very common in Geolocation API which finds and access the location of the device, user using.

It's Parameters:

showLocation : Which specifies recalling of request which shows the location.

ErrorHandler: Specifies the recalling of request which is executed as any error troubles.

Options: specifies some sort of options to get specific information.

Data Representation:

User location can be used through:

- Geodetic
- Civic

1. Geodetic specifies position directly for latitude and longitude

2. Civic specification can easily be understood by a common human being

3. While parameters have geodetic civic

representations both.

Dragging Element

By using this feature, you can simply drag and drop objects for dragging over different places easily.

Drawing Shapes

Scalable Vector Graphics is responsible for drawing different shapes for a web page. It has a lot of different ways to draw and design objects and shapes.

Drawing a Circle

In order to design an object with Scalable Vector Graphics, width and height needs to be clearly specified.

- cx is responsible for moving it along x-axis, or the horizontal axis.

- cy is responsible for moving it along y-axis, or the vertical axis.

- r sets the radius

- fill is responsible for the color

- circle's outline is designed with stroke

Other Shapes

<rect> draws a rectangle

<line> draws a line segment

<polyline> draws shapes designed with different lines.

<ellipse>

<polygon>

<ellipse> 

Animations using Shapes

Scalable Vector Graphics animations uses <animation> tag. It's another wide topic itself in which shape's animations are done. Which will be discussed in upcoming articles soon on www.howtechyy.com.

Paths

The <path> tag is responsible for specifying the path. Below given commands can be helpful in defining paths.

M: moveto

L: lineto

H: horizontal lineto

V: vertical lineto

C: curveto

S: smooth curveto

Q: quadratic Bézier curve

The <canvas> Tag

<Canvas> tag is very useful in designing different objects ranging from a simple line to typical objects. <canvas> tag contains an id which is used by javaScript for further detailing and working.

Drawing Shapes

The fillRect(x, y, w, h) method draws a "filled" rectangle, in which w indicates width and h indicates height. The default fill color is black. A black 100*100 pixel rectangle is drawn on the canvas at the position (20, 20):

The fillStyle property is used to set a color, gradient, or

pattern to fill the drawing. Using this property allows you to draw a green-filled rectangle.

The canvas supports various other methods for drawing:

Draw a Line:

moveTo(x,y): Defines the starting point of the line.

lineTo(x,y): Defines the ending point of the line.

Draw a Circle

beginPath(): Starts the drawing.

arc(x,y,r,start,stop): Sets the parameters of the circle.

stroke(): Ends the drawing.

HTML5 Form tag

HTML5 have a lot of different features for a website form. There are also some new attributes in HTML5 forms. Form tag is defined same as the way we used to do in HTML4.

New Attributes

placeholder attribute is very useful in HTML5, which was not utilized by the HTML4 users. <input> and <textarea> tags identifies what information is going to enter.

The autofocus attribute creates focus on form loading.

Required Fields

Some of the fields in a form are required and can not be left empty. Those fields contain require property.

HTML5 newly introduced input types:

- color

- date

- datetime

- datetime-local

- email

- month

- number

- range

- search

- tel

- time

- url

- week

New input attributes in HTML5:

- autofocus

- form

- formaction

- formenctype

- formmethod

- formnovalidate

- formtarget

- height and width

- list

- min and max

- multiple

- pattern (regexp)

- placeholder

- required

- step

Search Box

The new search input type can be used to create a search box.

Search Options

The <datalist> tag can be used to define a list of pre-defined options for the search field.

YOUR FIRST HTML PAGE

We can simply use any of text editors for making our first web page, as HTML is a text based Markup language. There are some very nice HTML editors available such as Notepad++ and Sublime Text 2, you can choose the one that works for you. For now, to create your first HTML page, let's write our examples in Notepad.

Add the basic HTML structure to the text editor in the body section.

and make sure to save it with any name i.e, (Howtechyy.html). When the file is opened, the following result is displayed in the web browser.

HTML PARAGRAPH

To create HTML paragraph, simply type in the <p> element with its opening and closing tags:

Result:

SINGLE LINE BREAK

Use the <br /> tag to add a single line of text to HTML paragraph without starting a new paragraph.

single line break can be seen in the paragraph.

TEXT FORMATTING IN HTML

In HTML, there is a list of elements that specify text style. Text formatting in HTML elements were designed to display special types of texts.

Each paragraph in the example is formatted differently

to demonstrate what each tag does

HTML HEADINGS

HTML includes six levels of headings, which are

ranked according to importance. These are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The following code defines all of the headings.

Result:

HTML HORIZONTAL LINES

To create a horizontal line, use the <hr /> tag.

Result:

HTML COMMENTS

The browser does not display HTML comments, but they help document the HTML and add descriptions, reminders, and other notes as HTML comments.

Result:

HTML ELEMENTS

HTML documents are made up of HTML elements. HTML documents consist of nested HTML elements.

In the example below, the body element includes the

<p> tags, the <br /> tag and the content:

Some elements are quite small. Since you can't put contents within a break tag, and you don't have an opening and closing break tag, it’s a separate, single element.

HTML ATTRIBUTES

HTML Attributes provide additional information about an element or a tag, while also modifying them. Most HTML attributes have a value and the value modifies the HTML attribute.

In this example, the value of center specifies that the p element's content will be aligned to the center of the page:

We could even modify the horizontal line, with pixels and likewise as percentages. This will be done as follows:

The align attribute is employed to specific, however the text is aligned. With the example below, we have simply managed to align it to the middle , and a line that is aligned to the right:

You might be thinking what happens if you try to use contradictory attributes inside an equivalent component.

HTML <img> Tag

<img> tag is employed to embed an image. src stands for the location of the image or the address:

image location needs to be specified by using the src attribute that's between the quotation marks. For instnace, if you've got a picture named "tree.jpg" within the same folder, code will appear as follows:

To specify the image size, use the height and width HTML attributes. It can be used by using the percentage or values in pixels.

By default, an HTML image has no borders. Use the border

HTML attribute inside the HTML image tag to create a border around the image.

HTML LINKS

Links are very useful on websites. Links are embedded simply within images or to the text. Which is when clicked redirects us to the specified web page. Links tag is defined as <a> tag.

Use the href attribute to define the link's destination address:

The link goes between the inverted commas such as ("www.Howtechyy.com"). 

Giving a _blank value to the of target attribute which will open the link in new tab.

HTML LIST

An ordered list starts with the <ol> tag, and each list

item is defined by the <li> tag. Here is an example of an ordered list:

Result:

An unordered list starts with the <ul> tag.

Result:

HTML TABLES

HTML Tables are defined by using the <table> tag. HTML Tables are divided into table rows with the <tr> tag.

HTML Table rows are divided into table columns (table data)

with the <td> tag:

A border can be added using the border attribute:

A table cell can span two or more columns:

Result:

The example below demonstrates the colspan attribute in action:

Result:

To align your table to the center, you can simply use the following:

INLINE AND BLOCK ELEMENTS IN HTML

In HTML, most elements are defined as block level or

inline elements.

For instance: <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div>, etc.

They are simply represented indepedent of line breaks.

For example: <b>, <a>, <strong>, <img>, <input>, <em>, <span>, etc.

The <div> element is a block-level element that is often used as a container for other HTML elements. When used together with some CSS styling, the <div> element can be used to style blocks of content:

Similarly, the <span> element is an inline element that is often used as a container for some text. When used together with CSS, the <span> element can be used to style parts of the text.

TYPES OF ELEMENTS

Elements are used as block level element or inline level elements. This includes the following elements:
 

APPLET - embedded Java applet

IFRAME - Inline frame

INS - inserted text

MAP - image map

OBJECT - embedded object

SCRIPT - script within an HTML document

You can insert inline elements inside block elements. For example, you can have multiple <span> elements inside a <div> element.

HTML FORMS

HTML forms are used to collect information from the

user. Forms are defined using the <form> element, with its

opening and closing tags:

Use the action attribute to point to a web page that will

load after the user submits the form. Method attribute identifies the GET and POST methods while using form tag.

The input element has many variations, depending on the type attribute. It can be a any url, content or passwords or something to input.

The example below shows a form requesting a

username and password:

Result:

If we change the input type to radio, it allows the user to select only one of a number of choices:

Result:

The type "checkbox" allows the user to select more than one option:

Result:

The submit button submits the value of a form to its action attribute:

Result:

Now, we'll create a Contact Form. The form will include Name, Email, and Message fields. We'll also add a Submit button. See the code below:

This is just a static HTML page, so it won't work to actually submit the form. You'd need to create the server-side code in order to submit a real form and process the data.

HTML COLORS

HTML colors comprises of hexadecimal numbers and alphabets.

[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F ]

Colors are displayed in combinations of red, green, and

blue light (RGB). You can simply use hashtag symbol (#) before a Hexadecimal values defines HTML colors.

As shown in the picture below, the circles overlap, forming new colors:

All of the possible red, green, and blue combinations potentially number over 16 million. Here are only a few of them:

We can mix the colors to form additional colors:

Orange and red mix:

The bgcolor attribute can be used to change the web

page's background color. This example would produce a dark blue background with a white headline:

HTML FRAME

A page can be divided into frames using a special

frame document. The <frame> tag defines one specific window (frame) within a <frameset>. Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize, etc. The <frameset> element specifies the number of columns or rows in the frameset, as well as what percentage or number of pixels of space each of them occupies.

Use the <noresize> attribute to specify that a user

cannot resize a <frame> element:

Frame content should be defined using the src

attribute. Lastly, the <noframes> element provides a way for browsers that do not support frames to view the page.

The element can contain an alternative page, complete

with a body tag and any other elements.