HTML 5

HTML

What is HTML?

● Stands for HyperText Markup Language

● HyperText: Link between web pages.

● Markup Language: Text between tags which defines structure.

● It is a language to create web pages

● HTML defines how the web page looks and how to display content

with the help of elements

● It forms or defines the structure of our Web Page

● Need to save your file with .html extension

Features Of HTML

● The learning curve is very easy (easy to modify)

● Create effective presentations

● Add links wherein we can add references

● Can display documents on platforms like Mac , Windows, Linux etc

● Add videos, graphics and audios making it more attractive.

● Case insensitive language

HTML Editors

● Simple editor: Notepad

● Notepad++

● Atom

● Best editor: Sublime Text.

HTML Skeleton

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

Instruction to the browser about the HTML version.

<html>

Root element which acts as a container to hold all the code

Browser should know that this a HTML document

Permitted content: One head tag followed by one body tag

<head>

Everything written here will never be displayed in the browser

It contains general information about the document

Title, definitions of css and script sheets

Metadata(information about the document)

<body>

● Everything written here will be displayed in the browser

● Contains text, images, links which can be achieved through tags.

● Examples:

○ <p> This is our first paragraph. </p>

○ <a href="https://hmprogramming01.blogspot.com/">Go To Google</a>

○ <img src="photo.jpg">

HTML Comments

● Comments don’t render on the browser

● Helps to understand our code better and makes it readable.

● Helps to debug our code

● Three ways to comment:

○ Single line

○ Multiple line

○ Comment tag //Supported by IE

HTML Element

● Elements are created using tags

● Elements are used to define semantics

● Can be nested and empty

Basic Structure

<p color=”red”> This is our first Paragraph </p>

● Contains following things:

○ Start tag: <p>

○ Attributes: color =”red”

○ End tag: </p> // optional

○ Content: This is our first Paragraph

Element Types

● Block Level :

○ Takes up full block or width and adds structure in the web page

○ Always starts from new line

○ Always end before the new line

○ Example :

■ <p >

■ <div>

■ <h1>...<h6>

■ <ol>

■ <ul>

Element Types

● Inline Level:

○ Takes up what is requires and adds meaning to the web

page

○ Always starts from where the previous element ended

○ Example :

■ <span>

■ <strong>

■ <em>

■ <img>

■ <a>

Basic Tags:

● Enclosed within <>

● Different tags render different meaning .

● <title> tag

○ Whatever is written this tag comes up in the web page’s tab

○ Defines the title of the page

○ Syntax: <title>Home </title>

● <p> tag

○ Defines the paragraph

○ Syntax:<p > This is our first Paragraph </p>

ist of Self closing tags

● <hr> tag

○ Stands for horizontal rule

○ Dividing the web page

● <br> tag

○ Stands for break line

○ Moving to next line

● <img> tag

○ To add images in the web page

Proprietary content.

● <h1> tag …… <h6>tag

○ Stands for heading tag

○ Defines heading of a page

○ h1 represents most important page in the page

○ h6 represents least important page in the page

● <strong> tag

○ Defines the text to be bold

○ Replaced <b>tag //HTML5

● <em> tag

○ Defines the text to be bold

○ Replaced <i>tag //HTML5

● <ol> tag

○ Stands for ordered list

○ To define series of events that take place in some order

○ Example making a tea (like a flow chart)

○ <ol>.........</ol>

● <ul> tag

○ Stands for unordered list

○ To define series of events that take place where order is not

important.

○ Example your hobbies

○ <ul>.........</ul>

● <li> tag

○ Defines the list item

○ Used inside the ‘ol’ and ‘ul’ tag to define the events

○ <li></li>

● <div> and <span> tags

○ Both of these are used to group different tags .

○ Acts like a container.

○ Effective while styling.

○ <div>.........</div>

○ <span>....</span>

○ Difference <div> is block level and <span> is inline level.

● <img> tag

○ Used to add images in a web page

○ Syntax: <img src=”url”>

○ Self closing tag.

● <a> tags

○ Used to add links in a web page

○ <a href=”url”> Name of the link </a>

○ Used to create a table on a web page

○ Need other tags for completing the creation of a table

■ <tr> : for marking the table row

■ <th> : for table header

■ <td> : for table column data

○ Everything is always enclosed within <tr>

■ <thead> : to keep all header data

■ <tbody> : to keep all body data

● <table> tag

● <form> tag

○ Action attribute: It specifies the URL to send form data to

○ Method attribute: specifies the type of HTTP request(GET or

POST)

○ Example: <form action="/my-form-submitting-page"

method="POST">

○ <input>: used to accept data from the user

○ Some types of inputs are:

● Text: used to store text data. Syntax: type="text"

● Password: used to enter a secure password. Syntax: type="password"

● Placeholder: temporary text in input fields. It is generally accompanied by

"text" and "password" attributes. Syntax: placeholder="insert- text-here"

● Button: used to include buttons in the form. Syntax: type="button"

value="insert-text-here"

● Submit button: For creating a submit button. All the data will get submitted

when it is clicked. Syntax: type="submit"

● Checkbox: to provide the ability to check multiple options. Syntax:

type="checkbox". To check options by default, set it with the checked attribute.

● Radio Button: allows one to choose a single option. Syntax: type="radio". Keep

the name attribute of all the options the same.

● <select>: For every possible option to select, use an <option> tag<option>

● Text Areas: multi-line plain-text editing control. Syntax: <textarea>. You can

specify how large the text area is by using the "rows" and "cols" attributes

● Labels: add captions for individual items in a form. Syntax: <label>. A label can

be used by placing the control element inside the <label> element, or by using

the "for" and "id" attributes.

● Validations ensure that users fill out forms in the correct format, e.g.:

a. required: The Boolean attribute which makes a field mandatory:

b. email: the browser will ensure that the field contains an

● Properties associated with each tag.

● <tag name=”value”></tag> is the structure.

● Global Attribute:

○ Title : Add extra information (hover)

○ Style: Add style information(font,background,color,size)

● <img src=”url” width=”100”>

○ src is the attribute used in image tag to define path

○ Width is attribute used to define width in pixels

○ Alt i.e alternate text if image is not loaded

● <a href=”url”> Name of the link </a>

● href used to define path of the link.

Attributes

HM Programming

القائمة الرئيسية

الصفحات

HTML 5

HTML

HTML Skeleton

Comments

Post a Comment