Scribd
Upload
27 views

What Is HTML

HTML is a markup language used to structure and present content on the web. It uses tags to define headings, paragraphs, links, images, and other elements. Common tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, and <form> for collecting user input with elements like text fields, checkboxes, and buttons. HTML documents are made up of these tags along with text content, and browsers render the pages according to the tags.

Uploaded by

Abdurezak Ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
27 views

What Is HTML

HTML is a markup language used to structure and present content on the web. It uses tags to define headings, paragraphs, links, images, and other elements. Common tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, and <form> for collecting user input with elements like text fields, checkboxes, and buttons. HTML documents are made up of these tags along with text content, and browsers render the pages according to the tags.

Uploaded by

Abdurezak Ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

What is HTML?

• HTML is a computer language devised to allow website creation.

• These websites can then be viewed by anyone else connected to the Internet.

• It is relatively easy to learn, with the basics being accessible to most people in one
sitting; and quite powerful in what it allows you to create.

• It is constantly undergoing revision and evolution to meet the demands and


requirements of the growing Internet audience under the direction of the World
Wide Web Consortium, W3C, the organization charged with designing and
maintaining the language.
Html…

• The full meaning of HTML is HyperText Markup Language.

• HyperText is the method by which you move around on the web — by


clicking on special text called hyperlinks which bring you to the next page.

• The fact that it is hyper just means it is not linear — i.e. you can go to any place
on the Internet whenever you want by clicking on links — there is no set order to
do things in.

• Markup is what HTML tags do to the text inside them.

• HTML is a Language, as it has code-words and syntax like any other language.
How does HTML works?
• HTML consists of a series of short codes typed into a text-file by the site author
— these are the tags.

• The text is then saved as a html file, and viewed through a browser, like Internet
Explorer or firefox.

• browser reads the file and translates the text into a visible form, rendering the
page as the author had intended.

• Writing your own HTML entails using tags correctly to create your vision.
What is HTML Tag?

• HTML tags are element names surrounded by angle brackets

• <tagname> content goes here...</tagname>

• HTML tags normally come in pairs like <p> and </p>

• The first tag in a pair is the start tag, the second tag is the end tag

• The end tag is written like the start tag, but with a forward slash
inserted before the tag name
The structure of an HTML element
HTML Element

• The <!DOCTYPE html> declaration defines this document to be


HTML version 5
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph
Heading Tags

• Any document starts with a heading. You can use different sizes for
your headings.

• HTML also has six levels of headings, which use the elements <h1>,
<h2>, <h3>, <h4>,

• <h5>, and <h6>. While displaying any heading, browser adds one line
before and one line after that heading.
Heading example
Paragraph Tag

• The <p> tag offers a way to


structure your text into different
paragraphs.

• Each paragraph of text should go


in between an opening <p> and a
closing </p> tag as shown below
in the example:
Line Break Tag

• Whenever you use the <br />


element, anything following it
starts from the next line. This tag
is an example of an empty
element
Html tags
 Horizontal Lines
• Horizontal lines are used to visually break-up sections of a document.
• The <hr> tag creates a line from the current position in the document to
the right margin and breaks the line accordingly.
• For example, if you want to give a line between two paragraphs you
use <hr>
• <hr /> tag is an example of the empty element, where you do not need
opening and closing tags, as there is nothing to go in between them.
• The <hr /> element has a space between the characters hr and the
forward slash. If you omit this space, older browsers will have trouble
rendering the horizontal line.
Html tags…
 HTML Links
• HTML links are defined with the <a> tag: <a href="url">link text</a>.
• The link's destination is specified in the href attribute. Attributes are used to provide additional
information about HTML elements.
• Example: -<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
 HTML image
• HTML images are defined with the <img> tag.
• The source file (src), alternative text (alt), width, and height are provided as attributes.
• Example: -<img src="smiley.gif" alt="Smiley face" height="42"width="42">
 HTML Lists
• HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag,
followed by <li> tags (list items):
HTML Frames

• HTML frames are used to divide your browser window into


multiple sections where each section can load a separate HTML
document.

• A collection of frames in the browser window is known as a


frameset.

• The window is divided into frames in a similar way the tables are
organized: into rows and columns.
Creating Frames

• To use frames on a page we use <frameset> tag instead of <body> tag.

• The <frameset> tag defines how to divide the window into frames.

• The rows attribute of <frameset> tag defines horizontal frames and


cols attribute defines vertical frames.

• Each frame is indicated by <frame> tag and it defines which HTML


document shall open into the frame.
HTML Tables

• HTML Tables is used to preset data in rows and columns format.

• A Table is the collection of rows and rows is the collection of columns.

• <tr> stands for table rows.

• To add a row in a table <table row> tags are used.

• <td> or <th> is used to put the column inside the row.

• Whereas <td> means table data and <th> means table head.
HTML Forms

• HTML Forms are required, when you want to collect some data from the site
visitor.

• For example, during user registration you would like to collect information such
as name, email address, credit card, etc.

• A form will take input from the site visitor and then will post it to a back-end
application such as CGI, ASP Script or PHP script etc.

• The back-end application will perform required processing on the passed data
based on defined business logic inside the application

• There are various form elements available like text fields, text-area fields, drop-
HTML Forms…

• The HTML <form> tag is used to create an HTML form and it has
following syntax:
Form Attributes
HTML Form Controls
 There are three types of text input used on forms
• Single-line text input controls :is used for items that require only one
line of user input, such as search boxes or names. They are created
using HTML <input> tag.
• Password input controls: This is also a single-line text input but it
masks the character as soon as a user enters it.
• They are also created using HTML <input> tag
• Multi-line text input controls :This is used when the user is required
to give details that may be longer than a single sentence.
• They are created using HTML <textarea> tag
Input Attributes
Textarea Attributes
Checkbox Control

• Checkboxes are used when more than one option is required to be


selected. They are also created using HTML <input> tag but type
attribute is set to checkbox.
Button Controls

• There are various ways in HTML to create clickable buttons.


• You can also create a clickable button using <input>tag by setting its
type attribute to button.

You might also like