What Is HTML?: HTML Stands For Hyper Text Markup Language and

What is HTML?
• HTML stands for Hyper Text Markup Language and

it is a language used to create Web Page.
• HTML is the core language of the world wide

web, the fundamental building block of web page.
• With HTML you make your own pages and decide

what text, links, graphics, forms, as well as other
elements will appear on them.
What is HTML?
• HTML contains a set of tags (meaningful elements that
describe or display data in some way).
• HTML is written using these tags to display content on
web page.
• HTML is a static language.
• HTML is used to place elements on a web page, and

that's it.
• Dynamic content can be created with languages such as

JavaScript, VBScript, and PHP.
HTML File Extension and Text editors
• When you open a document created with Microsoft
Word, it will have a .doc extension, and so on.
• HTML documents have a file extension of .htm or

.html
• We use a basic text editor to write our HTML code.
• The text editor we will be using (as a beginner) to build
your pages is notepad++, sublime text3, php storm,
visual code editor etc.
HTML basics
Tags
• Tags are surrounded by < and > symbols (called angle
brackets) .
• Most tags in HTML have an end tag, some do not.
• There are tags for many different elements including text,
links, images, tables, form elements, and much more.
• For example, to display italic text you would use the <i> tag.
• HTML tags can contain one or more attributes.
• Attributes are added to a tag to provide the browser with
more information about how the tag should appear or
behave.
• Attributes consist of a name and a value separated by an
equals (=) sign.
Example:
We can write one tag within another tag
<h1> Hello there welcome to html tag . <b>It is heading one
with font bold</b></h1>
<p><i> this text will be italic </i> and this text will not
italic.</p>
Output:
Hello there welcome to html tag .It is heading one
this text will be italic and this text will not italic
The core setup
• It all begins with the <html> tag. This tag signifies the start
of a web page.
• You must always begin your HTML code with this tag and
all the other tags will go between <html> and it's closing tag
</html> .
• With that said, let's begin building:

<html>
</html>
HTML Document Head
• The head section of an HTML document will actually not
appear on a webpage.
• It contains important information about the page such as the
page's title and styles that will affect the page.
• The head section is set with the <head> tag which comes
right after the <html> tag and the information about the page
will go between <head> and it's closing tag </head>
• Moving on:
<html>
<head>
</head>
</html>
HTML Document Title
• The page's title is set with the <title> tag .
• The title can be seen in the top left corner of the web
browser.
• The <title> tag goes inside the <head> tag.
• You can give your pages any title you want, but remember
that the best titles are short and straight to the point.
• Giving the page a title:
<html>
<head>
<title>
HTML is cool
</title>
</head>
</html>
HTML Document body
• The body section of an HTML document is where all the
content is placed that will be seen on the page.
• The body section is set with the <body> tag which comes
right after the <head> tag and the page's content will go
between <body> and it's closing tag </body>
• Page body:
<body>
Here is some text that will be seen on the page
</body>
An Entire HTML document
• The entire code:
<html>
<head>
<title>
HTML is cool
</title>
</head>
<body>
Here is some text that will be seen on the page
</body>
</html>
• This same structure will apply to the code of all of the pages you
will build, no matter how simple or complex.
HTML Text formatting
• Text in an HTML document can be formatted

in many ways such as changing the texts size,
color, and font type, as well as advanced
formatting such as creating lists, paragraphs,
and line breaks.
The <font> tag
• Used to set text size, font type, and color.
• It takes three attributes - size, face, color.
Attributes of the <font> tag
Size: takes a numerical value (1 (smallest) - 7
(biggest)) specifying the size of the text.
Face: Specifies the font of the text. Many possible

values including Times New Roman, Georgia,
and Courier New.
Color: Specifies the color of the text.

Example:
<font face="Goergia" color="green" size="4">
The font of this text will be Georgia, it will be green, and a
size of 4.
</font>
Output:
The font of this text will be Georgia, it will be green, and a size of 4.
Bold, italic, and underlined text
• The <b> tag used to make text bold

• The <i> tag used to make text italic, and
• The <u> tag used to underline text.
• The <br/> used to display line breaks on a page
Example:
<b>here is some bold text</b> <br />
<i>here is some italic text</i> <br />
<u>here is some underlined text</u> <br />
<u><i><b>here is some bold, italic, and underlined text</b></i></u>
Output:
here is some bold text

here is some italic text
here is some underlined text
here is some bold, italic, and underlined text
Headings
• Can be displayed using the <h1> through <h6> tags.
• The lower the number in a heading tag, the bigger the

heading.
• Heading tags: <h1> (biggest heading), <h2> , <h3> ,

<h4> , <h5> , <h6> (smallest heading).
NOTE: The browser will automatically place a line

break before and after each heading.
Example:
<h6>Text in a small heading</h6>
<h5>Bigger heading</h5>
<h4>Even bigger heading</h4>
<h3>Another heading</h3>
<h2>And another heading</h2>
<h1>The biggest heading</h1>
Output:
Text in a small heading
Bigger heading
Even bigger heading
Another heading
And another heading
The biggest heading
Big and small text
• The <big> tag used to display big text.

• The <small> tag is used to display small text.
• The <big> tag will display text as only a little bigger
than its regular size, and
• The <small> tag will display text as only a little
smaller than its regular size.
Example:
Here is some <big>big text</big>
<br /><br />
Here is some <small>small text</small>
Output:
Here is some big text
Here is some small text

Addresses
• Addresses are placed on a webpage with the
<address> tag.
Example:
<address> Technobic<br />
P.O. BOX 45<br />
Kombolch, Ethiopia<br />
</address>
HTML Colors
• In HTML, colors can be added by using the style
attribute.
• You can specify a color by its name (eg, blue), its
hexadecimal value (eg, #0000ff), RGB value (eg
rgb(0,0,255)), or its HSL value (eg
hsl(240,100%,100%)).
Syntax
Foreground Color
• To add color to an HTML element, you use
style="color:{color}", where {color} is the color
value.
HTML Colors
Example
<h3 style="color:blue">HTML Colors</h3>
Background Color
• To add a background color to an HTML element, you
use style="background-color:{color}", where {color}
is the color value.
For example:
<h3 style="background-color: orange">HTML Colors</h3>

HTML Colors
Border Color
• To add a colored border to an HTML element, you use
style="border:{width} {color} {style}",
• where {width} is the width of the border, {color} is the color
of the border, and {style} is the style of the border.
For example:
• <h3 style="border:1px blue solid">HTML Colors</h3>
HTML Color Codes
Hex Code Decimal Code
Color Name
RGB RGB
Maroon 800000 128,0,0
Red FF0000 255,0,0
Orange FFA500 255,165,0
Yellow FFFF00 255,255,0
Olive 808000 128,128,0
Green 008000 0,128,0
Hex Code Decimal Code
Color Name
RGB RGB
Purple 800080 128,0,128
Fuchsia FF00FF 255,0,255
Lime 00FF00 0,255,0
Teal 008080 0,128,128
Aqua 00FFFF 0,255,255
Blue 0000FF 0,0,255
Superscripts and subscripts
Superscripts : are created with the <sup> tag.

Example:
10<sup>2</sup> = 100
Output:
102 = 100
Subcripts: are created with the <sub> tag.
Example:
H<sub>2</sub>O
Output:
H20
Creating spaces
(character entity): used to create one space.
Example:
some text
Lists
• Lists are an excellent way to present information in
an organized fashion.
• There are three types of lists

 numbered (ordered) lists,
 bulleted (unordered) lists,
 definition lists
Bulleted lists
• The bulleted list is a list which includes a bullet

next to each item in a list.
• Bulleted lists are created with the <ul> tag.
• Each item in the list is displayed with the <li>

tag.
Example:
<b>Fruits</b>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
Output:
Fruits
• Apples
• Oranges
• Bananas
Example:
<b>Fruits</b>
<ul type="square">
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
Output:
Fruits
 Apples
 Oranges
 Bananas
Numbered lists
• The numbered list is a list which uses numbers

instead of bullets next to each item in a list.
• Numbered lists are created with the <ol> tag.
• Each item in the list is displayed with the <li> tag.

Example:
<b>Computer languages</b>
<ol>
<li>HTML</li>
<li>Javascript</li>
<li>PHP</li>
</ol>
Output:
Computer languages
1. HTML
2. Javascript
3. PHP
Example:
<b>Computer languages</b>
<ol type="I">
<li>HTML</li>
<li>Javascript</li>
<li>PHP</li>
</ol>
Output:
Computer languages
I. HTML
II. Javascript
III. PHP
Lists within lists
Example
<ul>
<li>Big animals
<ol type="I">
<li>Giraffe</li>
<li>Elephant</li>
<li>Bear</li>
</ol>
</li>
<li>Small animals
<ol type="I">
<li>Rabbit</li>
<li>Cat</li>
<li>Hamster</li>
</ol>
</li>
</ul>
Definition lists
• A definition list: is a list of words together with

their definitions organized in a certain manner.
• Definition lists are created using a few tags.
• Definition list tags
 <dl> :- used to begin a definition list.

 <dt> :- used to begin a definition term.
 <dd> :- used to define a term in a definition list.
Example:
<dl>
<dt><b>Cactus<b></dt>
<dd>A spikey plant</dd>
<dt><b>HTML</b></dt>
<dd>A markup language for the web</dd>
</dl>
Output:
Cactus
A spikey plant
HTML
A markup language for the web.
Paragraphs
• If you have a bunch of text on a webpage, it should

be formatted in paragraphs.
• The tag used to create a paragraph is <p>.
• Using the <p> tag will place a line above and

below the paragraph's text automatically.
Example:
<p>
So you want to get into computer programming? Perhaps you
intend on editing some web pages, creating a document editing
application, creating a multi-functional interactive game, or
one of the many other things that can be done with computer
programming.
</p>
<p>
In the past, the .htm extension was used for HTML files
because of older operating systems which limited file
extensions to three letters. Now awadays however, the .html
extension is mostly used and using this extension is better
convention.
</p>
Paragraphs Alignment
• You can align paragraphs using the align attribute.
• Set this attribute with the value "center" to center a

paragraph or "right" to align a paragraph to the
right.
Example:
<p align=“center”>
So you want to get into computer programming? Perhaps you
intend on editing some web pages, creating a document
editing application, creating a multi-functional interactive
game, or one of the many other things that can be done with
computer programming.
</p>
<p align=“right”>
In the past, the .htm extension was used for HTML files because
of older operating systems which limited file extensions to
three letters. Now awadays however, the .html extension is
mostly used and using this extension is better convention.
</p>
Horizontal lines
• Can be a useful tool to outline something important,

to make a separation between content in a webpage,
or to add style.
• Horizontal lines can be created with the <hr> tag.
• The <hr> tag takes the attribute width which specifies the
width of the horizontal line.
NOTE: The <hr> tag has no end tag.
Example:
<hr width="95%" />
Output:
Common character entities
• & - ampersand sign ( & )
• < - less than sign ( < )
• > - greater than sign ( > )
• © - copyright symbol( © )
• ™ - trademark symbol ( ™ )

HTML links
• Links are used to create connections to other documents and
other resources such as images or sound files on the world
wide web.
• Links, otherwise known as hyperlinks, are defined using the

<a> tag - otherwise known as the anchor element.
• To create a hyperlink, you use the <a> tag in conjunction

with the href attribute (href stands for Hypertext Reference).
• The value of the href attribute is the URL, or, location of

where the link is pointing to.
HTML links
• Hypertext references can use absolute URLS, relative
URLs, or root relative URLs.
• Absolute :- refers to a URL where the full path is

provided. For example, http://www.ila.edu/html/tutorial/
• Relative:- refers to a URL where only the path, relative

to the current location, is provided. For example, if we
want to reference the http://www.ila.com/html/tutorial/
URL, and our current location is
http://www.ila.com/html/, we would use tutorial/
HTML links
• Root relative:- refers to a URL where only the path,
relative to the domain's root, is provided. For example, if
we want to reference the
http://www.ila.com/html/tutorial/ URL, and the current
location is http://www.ila.com/html/, we would use
/html/tutorial/.
• The forward slash indicates the domain's root.
• This way, no matter where your file is located, you can
always use this method to determine the path, even if
you don't know what the domain name will eventually
be.
HTML links
The <a> tag

• The <a> (anchor) tag is the tag used to create
links on a webpage.
• Attributes of the <a> tag:

 href - denotes the webpage or resource to link
to.
Syntax:
<a href="url">text that will be displayed as the link</a>
HTML links
Example:
<a href ="http://www.google.com">google.com</a>
Output:
google.com
HTML links
target - denotes where a link will open.
• By default, it will open in the same window, but you

can set it to open in a new window by setting the
target attribute to "_blank".
Example:
<a href="http://www. google.com" target="_blank">Google!</a>
HTML links
• The target attribute can have the following possible
values:
• _blank:- opens the URL in a new browser window.
• _self:- loads the URL in the current browser window.
• _parent:- loads the URL into the parent frame (still
within the current browser window). This is only
applicable when using frames.
• _top:- loads the URL in the current browser window, but

cancelling out any frames. Therefore, if frames were
being used, they aren't any longer.
HTML links
Named Anchors
• You can make your links "jump" to other sections within
the same page. You do this with named anchors.
• To use named anchors, you need to create two pieces of

code - one for the hyperlink (this is what the user will
click on), and one for the named anchor (this is where
they will end up).
HTML links
Named Anchors
• I created the named anchor first (where the user will end
up)
• Example HTML Code:
<h2>Link Targets<a name="link_targets"></a></h2>
• I then created the hyperlink (what the user will click on).
This is done by linking to the name of the named anchor.
You need to proceed the name with a hash (#) symbol.
• Example HTML Code:
<a href="#link_targets">Link Targets</a>
HTML links
Email Links
• You can create a hyperlink to an email address. To do
this, use the mailto attribute in your anchor tag.
• Example:
<a href="mailto:abebe@example.com">Email Us</a>
• Clicking on this link should result in your default email

client opening up with the email address already filled
out.
HTML links
Email Links
• You can go a step further than this. You can auto-
complete the subject line for your users, and even the
body of the email. You do this appending subject and
body parameters to the email address.
• <a
href="mailto:abebe@example.com?subject=Question&
body=Hey there">Email to Abebe</a>
HTML Comments
• Comments are a part of the HTML code and is used
to explain the code. The main thing to remember is
that HTML comments are not visible to your
website visitors.
• You write comments like this:

• Comments always start with .
This tells the browser when a comment begins and
ends.
The <img> tag
• <img> tag: used to place images on a webpage.
• The <img> tag has a few different attributes, but only

one which is required - the src attribute (short for
source).
• The src attribute denotes the location of the image.
Example:
<img src=“image.jpg“ />
• The alt attribute of <img> tag: specifies alternative
text to be displayed if an image does not load.
Example:
<img src=“image.jpg" width=“500” height=“300”alt=“image is lost" />

• border attribute of <img> tag used to set a border a
round an image and the thickness can be arranged
using numerical value.
Example:
<img src="image.jpg" alt=“Lost" border="1" />
• align attribute of <img> tag used to align an image
to the left , right alignment.
Example:
<img src="image.jpg" alt=“Lost" align="left" />

HTML forms
• Forms are the key to interaction on the world wide web
and are used for many things on Web Pages such as e-
commerce, sending e-mail…..
The <form> tag
• The <form> tag is used to create a form.
• All of a form's elements go in between the <form> and
</form> tags.
• Attributes of the <form> tag:
 name:- denotes the name of the form.
 action:- denotes the page where the form data will be sent to.
Example:
<form name="regForm" action="register.php"> </form>
Form elements
• Most form elements are created with the <input> tag.
• The form element to display is specified by the
<input> tag's type attribute.
NOTE: The <input> tag has no end tag.

Attributes of the <input> tag:
 type:- denotes the type of form element that will be

used.
 name:- Specifies the name of the form element
 value:- Specifies the text that will appear on
the form element
 size:- Sets the width of the form element
 maxlength:- Sets the maximum number of characters
that can be entered into a form
element
Example
 Text boxs
<form>
Name: <input type="text" name="name" size="23" maxlength="21" />
<br />
E-mail: <input type="text" name="email" size="23" />
</form>
 Password fields
<form>
Username: <input type="text" name="name" />
<br />
Password: <input type="password" name="password" />
</form>
 Buttons
<form>
<input type="button" value="Click here for a message"/>
</form>
 Radio buttons
<b> Which web browser do you use?</b>
<form>
<input type="radio" name="browser" value="Firefox"/> Firefox
<input type="radio" name="browser" value="Opera" />Opera
<input type="radio" name="browser" value="Chrome" />Chrome
<input type="radio" name="browser" value="Other" />Other
</form>
 Checkboxes
 Checkboxes are similar to radio buttons, but with checkboxes you can
select more than one option at a time.
Example:
<b>Which genre(s) of books do you like?</b>

<form>
<input type="checkbox" name="genre" value="Comedy" />Comedy
<input type="checkbox" name="genre" value="Adventure" />Adventure
<input type="checkbox" name="genre" value="Mystery" />Mystery
</form>
Select Lists
Select Lists
• A select list is a dropdown list with options. This
allows the user to select one option from a list of pre-
defined options.
• The select list is created using the <select> element in
conjunction with the <option> element.
Select Lists
Example
<select>
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
</select>
HTML tables
Tables:
• are used to display content on a webpage in a tabular
format (much like a spreadsheet).
• A table is created using the <table> tag and a closing

</table> tag.
• A table is consists of rows and columns.

Table Attribute
Attributes of the <table> tag
• border - takes a numeric value denoting the thickness of

the border around the table.
• cellspacing - takes a numeric value denoting how much

space to put between cells.
• cellpadding - takes a numeric value denoting how much

padding to put between what is in the cells and the cell
walls.
Example:
<table border="1" cellspacing=“2" cellpadding="2">
</table>
Table rows
• Table rows are created using the <tr> tag which should
go inside the <table> tag.
• Use an opening <tr> tag and its closing tag </tr> for
every row in the table.
Example
<table border="1" cellspacing="2" cellpadding="2">

<tr></tr>
<tr></tr>
<tr></tr>
</table>
Table cells
• Table cells are created using the <td> tag which
should go inside the <tr> tag.
• Use an opening <td> tag and its closing tag </td>

for every cell in the table.
Example:
<tr> <td></td><td></td></tr>
</table>
Adding Content to the table
• Now that we have a structure for our table, we can
add some content to it. The content of a table is
placed inside the table's cells..so inside the <td> tags
in the table.
Example:
<tr> <td>First row, first column</td>
<td>First row, second column</td> </tr>
<tr> <td>HTML</td> <td>Javascript</td> </tr>
<tr> <td>CSS</td> <td>PHP</td> </tr>
</table>
Empty cells
• A table cell may not appear unless it has content inside of it.
• You can include empty cells in a table by placing the
character entity inside a table cell.
Example:
<table border="2">
<tr>
<td>Four cells in this table</td>
<td>One is empty</td>
</tr>
<tr>
<td>Three are filled</td>
<td> </td>
</tr>
</table>
Headings
• You can display headings in a table using the <th> tag.
• Use the <th> tag just like the <td> tag.

Example:
<table border="2">
<tr>
<th> Web development</th>
<th>Software development</th>
</tr>
<tr>
<td>HTML</td>
<td>C++</td>
</tr>
<tr>
<td>PHP</td>
<td>Fortran</td>
</tr>
</table>
Captions
• A caption is added to a table using the <caption> tag.
• It should be placed right below the <table> tag before

the first <tr> tag.
Example:
<table border="2">
<caption> Computer languages</caption>
<tr>
<th>Web development</th>
<th>Software development</th>
</tr>
<tr>
<td>HTML</td>
<td>C++</td>
</tr>
<tr>
<td>PHP</td>
<td>Fortran</td>
</tr>
</table>
Table Column Spanning
• There may be situations where you need a cell or

cells to span more than one column.
• This is achieved using the colspan attribute of the

<td> tag.
• The colspan attribute takes a numeric value

indicating how many columns a cell should span.
Example:
<table border="2" cellspacing="4" cellpadding="10" width="80%"
align="center">
<caption>Web Languages</caption>
<tr>
<th width="40%" align="center">Client-side</th>
<td align="center">HTML</td>
<td align="center">CSS</td>
<td align="center">Javascript</td>
</tr>
<tr>
<th align="center">Server-side</th>
<td align="center">ColdFusion</td>
<td align="center" colspan="2“ >PHP</td>
</tr>
</table>
Table Row Spanning
• You can make a cell span more than one row using
the rowspan attribute of the <td> tag.
• The rowspan attribute takes a numeric value

indicating how many rows it should span.
Example:
<table border="2" cellspacing="4" cellpadding="10" width="90%" align="center">

<caption>Computer Languages</caption>
<tr>
<th align="center" rowspan="2">Web languages</th>
<td align="center">HTML</td>
<td align="center">CSS</td>
</tr>
<tr>
<td align="center">Javascript</td>
<td align="center">PHP</td>
</tr>
<tr>
<tr>
<th align="center" rowspan="2">Software languages</th>
<td align="center">C</td>
<td align="center">C++</td>
</tr>
<tr>
<td align="center">FORTRAN</td>
<td align="center">Visual Basic</td>
</tr>
<tr>
</table>
HTML backgrounds
• A background can often be an important part of a

webpage.
• You can use backgrounds to make a webpage look more

appealing or simply to add more style.
Adding a background color to elements
• You can set the background color of elements using the

bgcolor attribute.
• This attribute can take a color name, a hexadecimal
value, or an RGB value.
Example:
<body bgcolor="#FFFFFF">
<body bgcolor="rgb(255,255,255)">
<body bgcolor="white">
Setting the background color of a table
• To set one background color for an entire table, use
the bgcolor attribute inside the <table> tag.
Example:
<table border="1" bgcolor="orange">
<tr>
<td>Here is a</td>
<td>table with a</td>
</tr>
<tr>
<td>background color</td>
<td>of orange</td>
</tr>
</table>
Adding a background image to elements
• You can add a background image to elements

using the background attribute.
Example:
<body background="images.jpg">
Adding a background image to a table
• You can add a background image to a table that will
cover the entire table.
Example:
<table border="1" background="images.jpg">
<tr>
<td>This table</td>
<td>will have</td>
</tr>
<tr>
<td>a sky</td>
<td>background image</td>
</tr>
</table>
HTML Marquees
• A HTML marquee is a scrolling piece of text
displayed either horizontally across or vertically
down your web site page depending on the settings.
• This is created by using HTML tag <marquee>.
Syntax:
• A simple syntax to use marquee is as follows:
<marquee attribute_name="attribute_value"....more attributes>

One or more lines or text message or image
</marquee>
HTML Marquees
Attrubutes:
• A HTML marquee can have following attributes:
width: how wide the marquee is. This will have a value like 10 or
20%etc.
height: how tall the marquee is. This will have a value like 10 or
20% etc.
direction: which direction the marquee should scroll. This will
have value either up, down, left or right.
behavior: what type of scrolling. This will have value scroll, slid
and alternate.
scrolldelay: how long to delay between each jump. This will have
a value like 10 etc.
loop: how many times to loop. The default value is INFINITE,
which means that the marquee loops endlessly.
bgcolor: background color. This will have any color name or color
hex value.
HTML Marquees
Examples:
<marquee>This is basic example of marquee</marquee>
<marquee width="50%">This example will take only 50% width

</marquee>
<marquee direction="right">This text will scroll from left to

right</marquee>
SPAN and DIV Tags
 Two tags are particularly useful in combination with
class selectors:
 Both are "dummy" tags that don't do anything in

themselves. Therefore, they are excellent for carrying
CSS styles.
 <SPAN> is an "inline-tag" in HTML, meaning that no

line breaks are inserted before or after the use of it.
 <DIV> is a "block tag", meaning that line breaks are

automatically inserted to distance the block from the
surrounding content (like <P> or <TABLE> tags).
90
SPAN and DIV Tags
• Example
<div style="background-color:orange; text-align: center">

<p>Navigation section</p>
</div>
<div style="border:1px solid black">
<p>Content section</p>
</div>
SPAN and DIV Tags
<p> The <span style="color:green">span tag</span>

and the <span style="color: purple">div tag</span> are
*OK* man.
</p>

What Is HTML?: HTML Stands For Hyper Text Markup Language and

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

What Is HTML?: HTML Stands For Hyper Text Markup Language and

Загружено:

Авторское право:

Доступные форматы

What is HTML?

• HTML stands for Hyper Text Markup Language and

• HTML is the core language of the world wide

• With HTML you make your own pages and decide

• HTML is a static language.

• HTML is used to place elements on a web page, and

• Dynamic content can be created with languages such as

• HTML documents have a file extension of .htm or

• With that said, let's begin building:

• Text in an HTML document can be formatted

Face: Specifies the font of the text. Many possible

Color: Specifies the color of the text.

• The <b> tag used to make text bold

here is some bold text

• Can be displayed using the <h1> through <h6> tags.

• The lower the number in a heading tag, the bigger the

• Heading tags: <h1> (biggest heading), <h2> , <h3> ,

NOTE: The browser will automatically place a line

• The <big> tag used to display big text.

Here is some small text

<h3 style="background-color: orange">HTML Colors</h3>

Superscripts : are created with the <sup> tag.

Subcripts: are created with the <sub> tag.

&nbsp; (character entity): used to create one space.

• There are three types of lists

• The bulleted list is a list which includes a bullet

• Bulleted lists are created with the <ul> tag.

• Each item in the list is displayed with the <li>

• The numbered list is a list which uses numbers

• Numbered lists are created with the <ol> tag.

• Each item in the list is displayed with the <li> tag.

• A definition list: is a list of words together with

 <dl> :- used to begin a definition list.

• If you have a bunch of text on a webpage, it should

• The tag used to create a paragraph is <p>.

• Using the <p> tag will place a line above and

• You can align paragraphs using the align attribute.

• Set this attribute with the value "center" to center a

• Can be a useful tool to outline something important,

• Horizontal lines can be created with the <hr> tag.

• &amp; - ampersand sign ( & )

• &lt; - less than sign ( < )

• &gt; - greater than sign ( > )

• &copy; - copyright symbol( © )

• &trade; - trademark symbol ( ™ )

• Links, otherwise known as hyperlinks, are defined using the

• To create a hyperlink, you use the <a> tag in conjunction

• The value of the href attribute is the URL, or, location of

• Absolute :- refers to a URL where the full path is

• Relative:- refers to a URL where only the path, relative

The <a> tag

• Attributes of the <a> tag:

<a href ="http://www.google.com">google.com</a>

• By default, it will open in the same window, but you

• _top:- loads the URL in the current browser window, but

• To use named anchors, you need to create two pieces of

<a href="mailto:abebe@example.com">Email Us</a>

• Clicking on this link should result in your default email

• <img> tag: used to place images on a webpage.

• The <img> tag has a few different attributes, but only

• The src attribute denotes the location of the image.

<img src=“image.jpg" width=“500” height=“300”alt=“image is lost" />

<img src="image.jpg" alt=“Lost" align="left" />

(character entity): used to create one space.

• & - ampersand sign ( & )

• < - less than sign ( < )

• > - greater than sign ( > )

• © - copyright symbol( © )

• ™ - trademark symbol ( ™ )