Scribd
Upload
12 views61 pages

HTML Slides All

This document is a comprehensive guide to HTML, covering its definition, structure, and importance in web development. It includes explanations of HTML elements, syntax, formatting, lists, images, links, tables, forms, and multimedia integration. The document also highlights software requirements and tools for HTML editing and web browsing.

Uploaded by

Afaq Mughal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views61 pages

HTML Slides All

This document is a comprehensive guide to HTML, covering its definition, structure, and importance in web development. It includes explanations of HTML elements, syntax, formatting, lists, images, links, tables, forms, and multimedia integration. The document also highlights software requirements and tools for HTML editing and web browsing.

Uploaded by

Afaq Mughal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 61

HTML COURSE

Basic to Advance
Web Development
What is HTML?
HTML is the standard markup language for creating Web pages.
 What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
Why Learn HTML
 Easy Learning with HTML
 Try it Yourself
 Website/web pages
 Career as web Designer & Developer
 Free to use.
What is web?
 Web Page: A web page or webpage is a document,
commonly written in HTML, that is viewed in an Internet
browser.
 Website: A collection of related web pages is know as
website.
Software Requirements
 HTML Editor
 Browser
HTML Editor
 Notepad
 Notepad ++
 VS Code
 Dreamweaver
 Sublime Text
Web Browsers
 The purpose of a web
browser(Chrome, Edge,
Firefox, Safari) is to read
HTML documents and
display them correctly.
 A browser does not
display the HTML tags,
but uses them to
determine how to display
the document:
What is an HTML Element?
 An HTML element is defined by a start tag, some content,
and an end tag:
EXAMPLES OF TAGS

Note: Some HTML elements have no content (like the <br> element). These elements
are called empty elements. Empty elements do not have an end tag!
HMTL Page Structure
Example Explained
Basic Syntax
Save HTML File

Filename.html

File Extention
HTML Text Formatting Elements
 Headings  <strong> - Important text

 Paragraph  <i> - Italic text


 <em> - Emphasized text
 Space in Text
 <mark> - Marked text
 Line Break
 <small> - Smaller text
 Horizontal Row
 <sub> - Subscript text
 <b> - Bold text
 <sup> - Superscript text
HTML Listing Tags
Types of Lists:

 Un order List
 Order List
Unordered HTML List
 An unordered list starts with the <ul> tag. Each list item
starts with the <li> tag.
 The list items will be marked with bullets (small black
circles) by default:
Unordered HTML List - Choose List Item Marker

<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List

 An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
 The list items will be marked with numbers by default:
Ordered HTML List - The Type Attribute

Example:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Image Tag
 Images can improve the design and the appearance of a
web page.
 Img Tag
HTML Image Tag Properties
 Src
 Width
 Height
 alt
 title
Images on Another Server/Website
 Some web sites point to an image on another server.
HTML Links - Hyperlinks

 HTML links are hyperlinks.


 You can click on a link and jump to another document.
 Links allow users to click their way from page to page.
 When you move the mouse over a link, the mouse arrow
will turn into a little hand.
HTML Links - Hyperlinks

 HTML Links - Syntax


 The HTML <a> tag defines a hyperlink. It has the
following syntax:

 The most important attribute of the <a> element is


the href attribute, which indicates the link's destination.
HTML Links - Hyperlinks

 By default, links will appear as follows in all browsers:


 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
HTML Links - Use an Image as a Link
 To use an image as a link, just put the <img> tag inside the <a> tag:
HTML Links - Hyperlinks

Button as a Link
•To use an HTML button as a link, you have to add some
JavaScript code.
•JavaScript allows you to specify what happens at certain events,
such as a click of a button:
Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user's email
program (to let them send a new email):
HTML Links - Hyperlinks
HTML Links - The target Attribute
 The target attribute specifies where to open the linked document.
 The target attribute can have one of the following values:
 _self - Default. Opens the document in the same window/tab as it
was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window
Define an HTML Table
•A table in HTML consists of table cells inside rows and
columns.

•HTML tables allow web developers to arrange data into


rows and columns.
Define an HTML Table
Define an HTML Table
Table Cells
Each table cell is defined by a <td> and a </td> tag.

td stands for table data

Everything between <td> and </td> are the content of the


table cell.
Define an HTML Table
Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.

Table Headers
Sometimes you want your cells to be table header cells. In those
cases use the <th> tag instead of the <td> tag:

th stands for table header.


Define an HTML Table
HTML <iframe> Tag
•The <iframe> tag specifies an inline frame.

•An inline frame is used to embed another document within


the current HTML document.
HTML <iframe> Tag
HTML VideoTag
•The HTML <video> element is used to show a video on a
web page.
How it Works
The controls attribute adds video controls, like play, pause, and
volume.
It is a good idea to always include width and height attributes. If
height and width are not set, the page might flicker while the video
loads.
The <source> element allows you to specify alternative video files
which the browser may choose from. The browser will use the first
recognized format.
The text between the <video> and </video> tags will only be
displayed in browsers that do not support the <video> element.
HTML <video> Autoplay
To start a video automatically, use the autoplay attribute:
HTML Video - Media Types
HTML Forms
An HTML form is used to collect user input. The user input
is most often sent to a server for processing.
HTML Forms Elements
The HTML <form> element is used to create an HTML form for
user input:
HTML Forms Elements
1. text area
2. select Tag
3. input type file accept="image/*"
4. input type submit/ Reset button
5. fieldset
HTML Forms Elements
The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):


HTML Forms Elements
HTML <select> Tag
The <select> element is used to create a drop-down list.
The <option> tags inside the <select> element define the available
options in the drop-down list.
HTML Forms Elements
Input Type Submit
The <input type="submit"> defines a submit button which submits
all form values to a form-handler.
HTML Forms Elements
field set

•The <fieldset> tag is used to group related elements in a form.


•The <legend> tag is used to define a caption for the <fieldset> element.
Placeholder
•The placeholder attribute specifies a short hint that describes
the expected value of an input field (e.g. a sample value or a
short description of the expected format).

•The short hint is displayed in the input field before the user
enters a value.

Note: The placeholder attribute works with the following input


types: text, search, url, tel, email, and password
Placeholder Examples
Placeholder
NEW INPUT TYPES IN HTML5
•Number •Date time-local
•Range •Email
•Color •Search
•Date •Tel
•Time •Url
•Week
•Month
Favicon in HTML
•A favicon is a small, 16x16 pixel icon used on web browsers to
represent a website or a web page.
•A favicon is a small image, so it should be a simple image with
high contrast.
Favicon in HTML
HTML YouTube Videos
To play your video on a web page, do the following:

1) Upload the video to YouTube


2) Take a note of the video id
3) Define an <iframe> element in your web page
4) Let the src attribute point to the video URL
5) Use the width and height attributes to specify the dimension
of the player
HTML YouTube Videos
Block-level Elements
•A block-level element always starts on a new line, and the
browsers automatically add some space (a margin) before and
after the element.
A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
Two commonly used block elements are: <p> and <div>.
Inline Elements
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.

You might also like