HTML Basics
1
Outline
• What is HTML?
• Building Blocks of HTML
• HTML Syntax
• HTML Tag Format
• HTML Tags
• How to create HTML code
• Formatting Text
• Adding Images
• Adding Links
• List
• HTML style using CSS
2
What is HTML?
HTML stands for Hyper Text Markup Language
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 are represented by tags
HTML tags label pieces of content such as "heading",
"paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to
render the content of the page
3
Building Blocks of HTML
An HTML document consist of its basic building
blocks which are:
Tags: An HTML tag surrounds the content and
apply meaning to it. It is written between < and >
brackets.
Attribute: An attribute in HTML provides extra
information about the element, and it is applied
within the start tag. An HTML attribute contains two
fields: name & value.
4
HTML - Syntax
Elements: An HTML
element is an individual
component of an HTML
file. In an HTML file,
everything written within
tags are termed as HTML
elements.
5
HTML Tag Format
Most HTML tags have opening and closing tags that wrap
around their content, and look like this:
<p>This is a paragraph of text. It is wrapped by opening
and closing paragraph tags.</p>
Some HTML tags are self-closing, and look like this:
<br/> (This tag creates a line break.)
6
HTML tags
Tag Name Description
<a> It is termed as anchor tag and it creates a
hyperlink or link.
<abbr> It defines an abbreviation for a phrase or
longer word.
<b> It is used to make a text bold.
<base> This tag defines the base URL for all relative
URL within the document.
<basefont> This tag is used to set default font, size and
color for all elements of document.
<bdo> It is used to override the current text direction.
7
Contd..
Tags Description
<blockquote> It is used to define a content which is taken from
another source.
<body> It is used to define the body section of an HTML
document.
<br> It is used to apply single line break.
<button> It is used to represent a clickable button
<cite> It is used to define the title of the work, book,
website, etc.
<code> It is used to display a part of programming code in
an HTML document.
<col> It defines a column within a table which represent
common properties of columns and used with the
<colgroup> element.
8
Contd..
Tags Description
<dir> It is used as container for directory list of files.
<div> It defines a division or section within HTML document.
<dl> It is sued to define a description list.
<dt> It is used to define a term in description list.
<form> It is used to define an HTML form.
<frame> It defines a particular area of webpage which can contain
another HTML file.
<hr> It is used to apply thematic break between paragraph-level
elements.
<html> It represents root of an HTML document.
<ins> It represent text that has been inserted within an HTML
document.
9
Contd..
Tags Description
<object> It is used to embed an object in HTML file.
<ol> It defines an ordered list of items.
<optgroup> It is used to group the options of a drop-down list.
<option> It is used to define options or items in a drop-down
list.
<p> It represents a paragraph in an HTML document.
<textarea> It is used to define multiple line input, such as
comment, feedback, and review, etc.
<tfoot> It defines the footer content of an HTML table.
10
Contd…
Tags Description
<th> It defines the head cell of an HTML table.
<thead> It defines the header of an HTML table. It is used along
with <tbody> and <tfoot> tags.
<title> It defines the title or name of an HTML document.
<tr> It defines the row cells in an HTML table
<track> It is used to define text tracks for <audio> and <video>
elements.
<tt> It is used to define teletype text.
<title> It defines the title or name of an HTML document.
11
How to create HTML code ?
HTML can be created using any text editing
software, such as Notepad (Windows) or
TextEdit (Mac).
Once HTML code has been written, and the
file has been saved with a “.html” extension,
any web browser (Internet Explorer, Firefox,
Chrome, Safari, etc.) can render it.
12
Creating HTML Text using Notepad
Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the
bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
13
Contd..
Step 2: Write Some HTML code
Write or copy some HTML into Notepad.
14
Contd..
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the
Notepad menu.
Name the file "index.htm" and set the encoding to UTF-8
(which is the preferred encoding for HTML files).
15
Contd..
Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double
click on the file, or right-click - and choose "Open with").
The result will look much like this:
16
Formatting Text
First, let’s see how to format our text. First, we’ll put
each sentence of our text inside paragraph tags, so
that the browser will render them as paragraphs:
<body>
<p>This is the content of my page.</p>
<p>So far, it’s only text.</p>
</body>
(If we didn’t wrap our content in <p></p> tags, or
separate it with <br/> tags, there would be no breaks
between one line and the next – everything on the
page would run together.)
17
Formatting Text
Next, let’s add some formatting to our text. We can
change font styles using HTML. (Other text
formatting, such as colors, fonts, and size are
changed with CSS.)
<bold></bold> or <strong></strong> = bold text
<i></i> or <em></em> = italic text
18
Formatting Text
Let’s wrap some of our text with tags to change the
font styles:
<body>
<h1>Heading 1</h1>
<p>This is the <strong>content</strong> of my
page.</p>
<p><em>So far</em>, it's only text.</p>
</body>
19
Formatting Text
We can also use predefined heading tags to format
the headings on our page:
<body>
<h1>Heading 1</h1>
<p>This is the <strong>content</strong> of my page</p>
<p><em>So far</em>, it’s only text.</p>
</body>
• There are six heading tags: h1, h2, h3, h4, h5, h6
• Heading tags run from largest to smallest, meaning that
h1 is very large, and h6 is very small
• Heading tags are useful for search engine optimization
20
Adding Images
Images can be a great way to add color and visual
interest to pages.
The <img> tag is used to insert images; this tag
requires the use of attributes.
src=“image url” – defines the location of the image file,
so the browser knows where to find the image.
alt=“image description” – a brief description or title for
the image
21
Adding Images
Let’s add an image to the site:
<body>
<h1>Heading 1</h1>
<p>This is the <strong>content</strong> of my page </p>
<p><em>So far</em>, it's only text.</p>
<img src=“http://www.google.com/web/images/flower.jpg”
alt=“Flower” />
</body>
22
Adding Images
We can make some changes to our image by adding additional
attributes:
width=“image width in pixels or percentage”
height=“image height in pixels or percentage”
Be careful to adjust width and height proportionally to avoid
problems with aspect ratio
Using percentages is preferable for adaptive/responsive design
Width and height don’t both need to be included; the browser will
calculate the value of the missing attribute
Example:
<img src=“http://www.google.com/web/images/flower.jpg”
alt=“Flower” width=“150” />
23
Adding Links
Links are one of the most important elements of any
webpage.
Links can take visitors to pages within our site,
external sites, PDF files, Word documents, etc.
The tags for a link wrap around the text, image, or
other elements that visitors will click on to reach the
link.
<a href=“mypage.html”>My Page!</a>
24
Adding Links
Linking to a page within our site (a relative link) requires a
path to that page relative to the current location:
<a href=“/subfolder/page.html”>My page!</a>
Linking to an external site (absolute link) requires the
entire URL of the site we are linking to:
<a href=“http://www.google.com”>Visit Google</a>
(The absolute URL for a link can be copied from the address bar of
your browser.)
25
Adding Links
Since we are linking from a file that is stored locally
on our computer, we’ll need to use an absolute link,
so the browser knows that we’re linking to a file that
is not stored on our computer:
<body>
<h1>Heading 1</h1>
<p>This is the <strong>content</strong> of my page.</p>
<p><em>So far</em>, it's only text.</p>
<img src=“http://www.uvu.edu/web/images/flower.jpg” alt="Flower"
width="150"/>
<br/>
<a href=http://www.google.com/web>Web Community</a>
</body>
26
Lists
HTML Lists are used to specify lists of
information. All lists may contain one or more list
elements. There are three different types of
HTML lists:
Ordered List or Numbered List (ol)
Unordered List or Bulleted List (ul)
Description List or Definition List (dl)
27
Lists
Unordered Lists are useful for displaying bulleted lists of
content. The <ul></ul> tags wrap the entire list, and
<li></li> tags wrap each list item.
<a href="http://www.uvu.edu/web">Web Community</a>
<ul>
<li>List Item One</li>
<li>List Item Two</li>
</ul>
</body>
Ordered Lists work the same way, but they generate a
numbered list and are wrapped with <ol></ol> tags.
28
HTML Styles using CSS
CSS is used to apply the style in the web page
which is made up of HTML elements. It describes
the look of the webpage.
CSS provides various style properties such as
background color, padding, margin, border-color,
and many more, to style a webpage.
Each property in CSS has a name-value pair, and
each property is separated by a semicolon (;).
29
Three ways to apply CSS
To use CSS with HTML document, there are
three ways:
Inline CSS: Define CSS properties using
style attribute in the HTML elements.
Internal or Embedded CSS: Define CSS
using <style> tag in <head> section.
External CSS: Define all CSS property in a
separate .css file, and then include the file
with HTML file using tag in section.
30
CSS Styles, IDs, and Classes
HTML tags can be formatted using the style attribute
and CSS styles:
<div style=“text-align: center;”>
<p style=“color: blue;”>This text is blue and
centered on the page.</p>
</div>
The id attribute is used to specify the unique ID for
an element of the HTML document. It allocates the
unique identifier which is used by the CSS and
the JavaScript for performing certain tasks.
31
Contd…
A class attribute can be defined within <style>
tag or in separate file using the (.) character.
The HTML class attribute is used to specify a
single or multiple class names for an HTML
element.
The class name can be used by CSS and
JavaScript to do some tasks for HTML elements.
You can use this class in CSS with a specific
class, write a period (.) character, followed by the
name of the class for selecting elements.
32
33
