Scribd
Upload
4 views

HTML AS IT

The document provides a comprehensive overview of HTML, covering key components such as the head section, various elements like <title>, <meta>, <script>, and list types including ordered, unordered, and description lists. It also explains internal and external links, block-level and inline elements, image embedding, and table creation in HTML. Each section includes syntax examples and attributes relevant to the discussed elements.

Uploaded by

Ali Mohamed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

HTML AS IT

The document provides a comprehensive overview of HTML, covering key components such as the head section, various elements like <title>, <meta>, <script>, and list types including ordered, unordered, and description lists. It also explains internal and external links, block-level and inline elements, image embedding, and table creation in HTML. Each section includes syntax examples and attributes relevant to the discussed elements.

Uploaded by

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

HTML

Tags vs Elements vs Attributes


Tags vs Elements vs Attributes
Tags vs Elements vs Attributes
HTML Head
• In an HTML file, the html head is the first section in the code
containing information about a web page's properties and links to
external related files. For example, in the HTML head, you can have
the title of the page, meta tags, CSS code, Open Graph tags, and
JavaScript code.
HTML Head
• The following example is a basic HTML page template that helps
demonstrate where the head section of the code is placed when
creating a web page. As shown below, the head section and its
contents are in bold.
HTML Head
• The lang attribute
• The <title> element
• The <style> element
• The <link> element
• The <meta> element
• The <script> element
The lang attribute
Always use a language attribute on the html tag to declare the default
language of the text in the page. This is inherited by all other elements.
For example:

<html lang="en">

Note that you should use the html element rather than the body
element, since the body element doesn't cover the text inside the
document's head element.
The <title> element
The <style> element
• The <style> tag is used to define style information (CSS) for a
document.

• Inside the <style> element you specify how HTML elements should
render in a browser.
The <link> element
The <link> element
The <link> element
The <meta> element
• The metadata means information about data. The <meta> tag in
HTML provides information about HTML Document or in simple
words, it provides important information about a document. Adding
the meta tag while making the webpage or website, is a good practice
because search engines like Google search for this meta tag in order
to understand the information provided by the website. It is also
helpful if the user search for a specific website then the search engine
result page will display snippets in search results that will provide
information related to that website.
The <meta> element
• These tags are basically used to add name/value pairs to describe
properties of HTML documents, such as expiry date, author name, list
of keywords, document author, etc ie., it is used to specify a character
set, page description, keywords, author of the document, and viewport
settings. This tag is an empty element because it only has an opening
tag and no closing tag, but it carries information within its attributes. A
web document can include one or more meta tags depending on
information, but in general, it doesn’t affect the physical appearance of
the document.

• Syntax:
• <meta attribute-name="value">
The <meta> element

• Attributes: This tag accepts four attributes which are mentioned and
described below.
• name: This attribute is used to define the name of the property.
• http-equiv: This attribute is used to get the HTTP response message
header.
• content: This attribute is used to specify properties value.
• charset: This attribute is used to specify a character encoding for an
HTML file.
The <meta> element

• Key Points:
• The <meta> tag contents are not visible on your browser, but they can
be parsed by the machine.
• They are just used to give additional information about the HTML
document.
• The <meta> tags are added to our HTML document for the purpose
of Search Engine Optimisation.
• They are added inside the <head> tag & are used by browsers, search
engines & other web services.
• Through <meta> tag, designer can control the viewport.
The <script> element
• The <script> tag in HTML is used to define the client-side script. The
<script> tag contains the scripting statements, or it points to an
external script file. The JavaScript is mainly used in form validation,
dynamic changes of content, image manipulation, etc.

• Syntax:

• <script> Script Contents... </script>


The <script> element
Attributes: Many attribute associated with script tag.

• async: It is used to specify the script is executed asynchronously.


• charset: It is used to specify the character encoding used in an
external script file.
• defer: It is used to specify that the script is executed when the page
has finished parsing.
• src: It is used to specify the URL of an external script file.
• type: It is used to specify the media type of the script.
The <script> element
Example:
Lists
• A list is a record of short pieces of related information or used to
display the data or any information in web pages in the ordered or
unordered form. For instance, to purchase the items, we need to
prepare a list that can either be ordered or unordered list which helps
us to organize the data & easy to find the item. Please refer to the
HTML <li> type Attribute article for the various types of attributes that
can be used with the ordered & unordered list.
• Example: The below example illustrates the use of the unordered &
ordered list in HTML.
Lists <ul>
<li>Data Structures & Algorithm</li>
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li>
<li>Programming Languages</li>
</ul>
<h5>Data Structures topics</h5>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
<li>Queues</li>
<li>Trees</li>
<li>Graphs</li>
</ol>
Lists
Lists

Supported Tags: These tags are used in HTML listing.

HTML <ul> Tag


HTML <ol> Tag
HTML <dl> Tag
The HTML Unordered List
An unordered list starts with the “ul” tag. Each list item starts with
the “li” tag. The list items are marked with bullets i.e small black
circles by default.

Syntax:
<ul> list of items </ul>

Attribute: This tag contains two attributes which are listed below:

compact: It will render the list smaller.


type: It specifies which kind of marker is used in the list.
The HTML Unordered List
HTML unordered list has various list item markers:
Example 1: The Disc can be used to set the list item marker to a bullet
i.e default.
The HTML Unordered List
Example 2: The Circle can be used to set the list item marker to a
circle.
The HTML Unordered List
Example 3: The Square can be used to set the list item marker to a
circle.
The HTML Unordered List
Example 4: It’s none that can be used to set the list item marker with
no mark.
The HTML Unordered List
Example 5: Nested Unordered List, It is used to nest the list items ie.,
list inside another list.
The HTML Ordered List
An ordered list starts with the “ol” tag. Each list item starts with the “li” tag.
The list items are marked with numbers by default.

Syntax:

<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
The HTML Ordered List

Attributes:

compact: It defines the list should be compacted (compact attribute is


not supported HTML5. Use CSS instead.).
reversed: It defines that the order will be descending.
start: It defines that from which number or alphabet the order will start.
type: It defines which type(1, A, a, I, and i) of the order you want in your
list numeric, alphabetic, or roman numbers.
The HTML Ordered List
Example: This example illustrates the use of the reverse attribute,
control list counting & type attribute.
The HTML Ordered List
Example 3: Type=”a”, this list items will be numbered with lowercase
letters.
The HTML Ordered List
Example 4: Type=”I”, this list items will be numbered with uppercase
roman numbers.
The HTML Ordered List
Example 5: Type=”i”, this list items will be numbered with lowercase
roman numbers.
The HTML Ordered List
Example 6: Nested ordered list, a nested ordered list is a list that has
a list inside another list.
The HTML Description List
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term
name, and the <dd> tag describes each term. Please refer to the How
to add description list of an element using HTML? article for further
details.

Syntax:

<dl> Contents... </dl>


The HTML Description List
Example: This example describes the HTML Description List.
Internal and External Links
• 1. Internal Link :
Internal links are hyperlinks that direct the readers to a target page on your
website. Internal link is a link from one page to another page on the same
domain.
• Example are website navigation.
• Advantages of good internal link are :
• Internal link improves usability through anchor text.
• Internal linking improves page rank.
• Internal linking boots page views.
• Internal link decreases the bounce rate.
• Internal linking improves the indexing of your site.
Internal and External Links
• 2. External Link :
External links are that which wants customers clicking on links that directs them
away from your website. External links are sometimes called outbound links are
an important part of search engine optimization.
• Example of external link are example.com, someplace.com etc.
• Advantages of good external linking are :
• External link may helps the readers.
• Good external link helps to improve the authority of your website.
• Linking to outside website will not hurt your page rank .
• External link is just like your giving some extra resources to read that.
• External links are helps in enhancing credibility.
Difference between external link
and internal link
External link Internal link

It is difficult to control. It is easy, fast and free to control.

It appears in website navigation as well as in


It appears within the body text, in content.
the content.

It passes SEO authority from other site to It passes SEO authority pages on your site,
your site, increasing your “domain increasing the “page authority” of specific
authority”. pages.

It has more value. It has less value.

It connecting your external pages. It connecting your internal pages.

Domain 1 A links to Domain 2 b. Domain 1 A links to B.

It helps bots to find other web pages on your


It improves the quality of web pages.
site.

It also helps in increasing traffic to your


It helps in increasing traffic to your website.
website.
Internal Links in HTML
An internal link is used in html page to navigate properly in the webpage. If you want
to go to any specific location in the same page by clicking on a link, you can create an
internal link in the webpage. <a> tag is used for link creation in html page.

Syntax:

<a href= “#link1”> MyLink</a>


Here “href” contain the location name where the link will navigate us when we click
on “MyLink”. The location is given a name for reference and the name contain “#” at
the time of creating link.

<a name= “Link1”> my link starts here </a>


This is the place where we will reach on click.
external Links in HTML
An external link is used to interconnect two html webpages. When you want to
navigate to some other page or any other URL by clicking on a link on webpage,
external links are created. An external link can be created by using anchor tag in html
web page.

Syntax:

<a href= “Pagename.html or URL”> text to be written on link </a>

Here Pagename.html or URL is the name of the webpage or address where link will
navigate on click.
block-level and in-line elements
• Block Level Elements: A block-level element always starts on a new line and
stretches out to the left and right as far as it can ie, it occupies the whole
horizontal space of its parent element & the height is equal to the content’s
height.

• div element: The <div> element is used as a container for other HTML
elements. It has no required attributes. Style, class, and id are the commonly
used attributes.

• Syntax:
• <div>GFG</div>
block-level
• Example: Below code illustrates the implementation of <div> tag.
block-level and in-line elements
• Inline Elements: An inline element is the opposite of the block-level
element. It does not start on a new line and takes up only the necessary
width ie., it only occupies the space bounded by the tags defining the
HTML element, instead of breaking the flow of the content.

• span element: The <span> tag is used as a container for text. It has no
required attributes. Style, class, and id are the commonly used attributes.

• Syntax:
• <span>GFG</span>
In-line
• Example: Below code illustrates the implementation of <span> tag.
Images
• There are 2 ways to insert the images into a webpage:
• By providing a full path or address (URL) to access an internet file.
• By providing the file path relative to the location of the current web
page file.
Images
• The <img> tag is used to add or embed the images to a
webpage/website. The “img” tag is an empty tag, which means it can
contain only a list of attributes and it has no closing tag. The addition
of the images improves the quality along with enhancing the design
structure, appearance of the webpage. Nowadays, a website does not
directly add images to a web page, as the images are linked to web
pages by using the <img> tag which holds space for the image.

• Syntax:
• <img src="url" alt="some_text" width="" height="">
Images
• Attribute: The <img> tag has following attributes:
• src: It is used to specify the path to the image.
• alt: It is used to specify an alternate text for the image. It is useful as it informs the user about what the image means and
also due to any network issue if the image cannot be displayed then this alternate text will be displayed.
• crossorigin: It is used to import images from third-party sites that allow cross-origin access to be used with canvas.
• height: It is used to specify the height of the image.
• width: It is used to specify the width of the image.
• ismap: It is used to specify an image as a server-side image map.
• loading: It is used to specify whether a browser should defer the loading of images until some conditions are met or load
an image immediately.
• longdesc: It is used to specify a URL to a detailed description of an image.
• referrerpolicy: It is used to specify which referrer information to use when fetching an image i.e. no-referrer, no-referrer-
when-downgrade, origin, origin-when-cross-origin, unsafe-url.
• sizes: It is used to specify image sizes for different page layouts.
• srcset: It is used to specify a list of image files to use in different situations.
• usemap: It is used to specify an image as a client-side image map.
Images
• src: The src stands for source. Every image has an src attribute which
tells the browser where to find the image you want to display. The
URL of the image provided points to the location where the image is
stored. When the webpage loads for the first time, then the browser
gets the image from a web server and inserts it into the page. If the
image is not spotted by the browser then users will get a broken link
icon. It might be possible if the file path is wrong or the image got
deleted from that location.
Images
• Example 1: This simple example illustrates the use of the <img> tag in
HTML that is used to embed the image into the webpage.

.png’’
Images
• Example 1: This simple example illustrates the use of the <img> tag in
HTML that is used to embed the image into the webpage.

.png’’
Tables
• Defining Tables in HTML: An HTML table is defined with the “table”
tag. Each table row is defined with the “tr” tag. A table header is
defined with the “th” tag. By default, table headings are bold and
centered. A table data/cell is defined with the “td” tag.
Tables
• Example 1: In this example, we are creating a simple table in HTML using a table
tag.
Tables
• Example 3: This example explains the addition of the
border to the HTML Table.
Tables
Tables
• Creating Nested Tables: Nesting tables simply means making a Table inside another Table. Nesting tables can lead
to complex tables layouts, which are visually interesting and have the potential of introducing errors.
• Example 12: This example describes the Nested of HTML Table.
Forms
• <form> is a HTML element to collect input data with containing interactive controls. It provides facilities to
input text, number, values, email, password, and control fields such as checkboxes, radio buttons, submits
buttons, etc. or in other words, form is a container that contains input elements, like text, email, number,
radio buttons, checkboxes, submit buttons, etc. Forms are generally used when you want to collect data
from the user. For example, a user wants to buy a bag online, so he/she has to first enter their shipping
address in the address form and then add their payment detail in the payment form to place an order.

• Syntax:

• <form>

• elements of form...

• </form>
Forms
• Elements of HTML <form>
• These are the following HTML <form> elements:
• <label>: It defines label for <form> elements.
• <input>: It is used to get input data from the form in various type such as text, password, email, etc by
changing it’s type.
• <button>: It defines a clickable button to control other elements or execute a functionality.
• <select>: It is used to create a drop-down list.
• <textarea>: It is used to get input long text content.
• <fieldset>: It is used to draws a box around other form elements and group the related data.
• <legend>: It defines caption for fieldset elements.
• <datalist>: It is used to specify pre-defined list options for input controls.
• <output>: It display the output of performed calculations.
• <option>: It is used to define option in drop-down list.
• <optgroup>: It used to defines group related options in a drop down list.
Forms
• Elements of HTML <form>
• These are the following HTML <form> elements:
• <label>: It defines label for <form> elements.
• <input>: It is used to get input data from the form in various type such as text, password, email, etc by
changing it’s type.
• <button>: It defines a clickable button to control other elements or execute a functionality.
• <select>: It is used to create a drop-down list.
• <textarea>: It is used to get input long text content.
• <fieldset>: It is used to draws a box around other form elements and group the related data.
• <legend>: It defines caption for fieldset elements.
• <datalist>: It is used to specify pre-defined list options for input controls.
• <output>: It display the output of performed calculations.
• <option>: It is used to define option in drop-down list.
• <optgroup>: It used to defines group related options in a drop down list.
Forms
Textbox in HTML Form
• In an HTML form, we use <input> tag by assigning type attribute value
to text to input single line input. It is the most commonly used tag. To
define type attribute see the below syntax.

• Syntax:

• <input type="text">
Forms
Forms
Radio Button in an HTML Form
To create a radio button, we use the <input> tag following by radio type
to provide users to choose a limited number of choices.

Syntax:

<input type="radio" name="radio_button_name">


Note: The radio button must have shared the same name to be treated
as a group.
Forms
Forms
Checkbox in an HTML Form
• To create a checkbox in an HTML form, we use the <input> tag
following by the input type checkbox. It is a square box to ticked to
activate this. It used to choose more options at a time.

• Syntax:

• <input type="checkbox">
Forms
Forms
Combobox in an HTML Form
Combobox is used to create a drop-down menu in your form which contains multiple options.
So, to create an Combobox in an HTML form, we use the <select> tag with <option> tag. It is
also known as a drop-down menu.

Syntax:

<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
Forms
Forms
Submit button in an HTML Form
In the HTML form, submit button is used to submit the details of the
form to the form handler. A form handler is a file on the server with a
script that is used to process input data.

Syntax:

<input type="button" value="submit">


Forms
Forms
TextArea in an HTML Form
In the HTML form, a text area is used to add comments or reviews, or
addresses in the form. Or in other words, the text area is a multi-line text input
control. It contains an unlimited number of characters, and the text renders in
a fixed-width font and the size of the text area is given by the <rows> and
<cols> attributes. To create a text area in the form use the <textarea> tag.

Syntax:

<textarea> content </textarea>


Forms
Forms
Forms
Video
• To embed video in HTML, we use the <video> tag. It contains one or
more video sources at a time using <source> tag. It supports MP4,
WebM, and Ogg in all modern browsers. Only Ogg video format doesn’t
support in Safari browser.

• Syntax

• <video>
• <source src="file_name" type="video_file_type">
• </video>
Video
Attribute Value Description
When the page is loaded. It specifies to play video
autoplay autoplay
as soon as possible.

It displays video control such as play, pause, and


controls controls
stop.

loop loop It will start the video again when it is finished.

When the page is loaded video will be


muted muted
automatically muted.

poster URL It specifies an image will be shown until video play.

auto
It specifies how the author thinks the video will be
preload metadata
loaded when the page is ready.
none

src URL It specifies the URL of the audio file.

It specifies the width of the video area. The default


width pixels
value of width is ‘auto’.

It specifies the height of the video area. The default


height pixels
value of width is ‘auto’.
Video

OR
Audio
• To embed audio in HTML, we use the <audio> tag. Before HTML5, audio can
not be added to web pages in the Internet Explorer era. To play audio, we
used web plugins like Flash. After the release of HTML5, it is possible. This tag
supports Chrome, Firefox, Safari, Opera, and Edge in three audio formats –
MP3, WAV, OGG. Only Safari browser doesn’t support OGG audio format.

• Syntax:
• <audio>
• <source src="file_name" type="audio_file_type">
• </audio>
Audio
Attribute Value Description
When the page is loaded. It specifies to
autoplay autoplay play audio as soon as possible.

controls controls It displays audio control.

It will start the audio again when it is


loop loop finished.

When the page is loaded audio will be


muted muted automatically muted.

auto metadata It specifies how the author thinks the


preload none audio will be loaded when the page is
ready.

src URL It specifies the URL of the audio file.


Audio

Note: Before adding an audio source must be sure that the


audio file is in the same directory and specified name.
iFrame
• The ” iframe ” tag defines a rectangular region within the document in which the
browser can display a separate document, including scrollbars and borders. An
inline frame is used to embed another document within the current HTML
document. The HTML iframe name attribute is used to specify a reference for an
<Iframe> element. The name attribute is also used as a reference to the elements
in JavaScript. The iframe is basically used to show a webpage inside the current
web page. The ‘ src ‘ attribute is used to specify the URL of the document that
occupies the iframe.

• Syntax:

• <iframe src="URL" title="description"></iframe>


iFrame
• Example: This example illustrates the use of an iframe tag which is
used to display a webpage inside the current web page.

You might also like