Lecture-2.pptx

 HTML is a fairly straightforward programming
language. Each tag starts with a < and ends with a >.
For example the paragraph tag is <p>
 There is a range of HTML tags, they help you to
design your web page. There are four required tags in
HTML. These are html, title, head and body. The table
below shows you the opening and closing tag, a
description and an example.

Start HTML Tag End HTML Tag Description
<html> </html>
These are the
tags you put at
the beginning and
end of an HTML
file.

<head> </head>
This includes information
including title, meta tags,
content type, links to
external pages like CSS
and JavaScript.

<title> </title>
This is the text that
goes in the title bar or
the browser window.
<body> </body>
This contains the
contents of the
document

Open tag Close tag Description Example
<p> </p>
This tag allows you to
create paragraphs
My name is Fred.
I live in Medway
<h1> </h1>
This is the largest
heading
Heading 1
<h2> </h2>
This is second biggest
heading
Heading 2
<h3> </h3> This is the next heading Heading 3
<h4> </h4> This is another heading Heading 4
<h5> </h5>
This is the second
smallest heading
Heading 5
<h6> </h6>
This is the smallest
heading
Heading 6
<hr > n/a
This is a horizontal line.
You can use width and
size attributes
<b> </b> This makes text bold Bold text
<i> </i> This makes text italic Italic text
<br /> n/a
This tag allows you to
insert line breaks
abc
def

Special Characters
In order to be able to display < and > escape symbols need to be used so that the browser
doesn't misinterpret the code. A character entity is used so that special characters can be
displayed. These consist of an ampersand(&), an entity name of a # and an entity code
number and a semicolon(;). Examples of special characters include:-
Greater than
>
&gt
Less than
<
&lt
Ampersand
&
&amp
Space
&nbsp
Quotation mark
"
&quot
Copyright
©
&copy

Accent Marks
 Accent marks in HTML also use the escape symbol. Like the special
characters accent marks start off with an ampersand & and then is followed
by a letter. If the letter is uppercase then the symbol is going to be
uppercase, if the symbol is lowercase then the symbol is going to be
lowercase.
Symbol
HTML
Code
Symbol
HTML
Code
Symbol
HTML
Code
Symbol
HTML
Code
à à á á â â ã ã
ä ä å å ç ç è è
é é ê ê ë ë ì ì
í í î î ï ï ñ ñ
ò ò ó ó ô ô õ õ
ö ö ø ø ù ù ú ú
û û ü ü

Attributes
 Key terms and abbreviation are used for most text properties. However some
properties need more information like aligning text
 An example of this is justifying text. You need to say whether the text is going to be
left, right or centred. To be able to do this you need to use text attributes.
This text has been justified to the left
Left
To justify a paragraph to the left the HTML code is:- <p align="left"> Text you
want justified to the left </p>
This text has been centred using the align centre tagged
Center
To centre align a paragraph the HTML code is:- <p align="center"> Text you
want centred goes here </p>
This text has been justified to the right
Right
To justify a paragraph to the right the HTML code is:- <p align="right"> Text
you want justified to the right </p

Horizontal lines
The code below shows a horizontal line which takes up 75% of the
page and has a thickness of 3.
<hr width="75%" size="3"/>
If you don't specify a size of the horizontal line then the default size is 2.
<!– Comment –>
The comment tag helps programmers to understand the HTML source code. The comments are not visible on the web page in a browser.
Syntax:

<a></a>
The <a> tag or the anchor tag allows us to link one web page to another
page or a section of the same page. The <a> tag has an href attribute that
holds the destination URL. Using the anchor tag, we can create a hyperlink
to web pages, files, email addresses, segments on the same page, etc.
<a href="https://www.naukri.com/learning/">This is a link</a>

What is the largest header tag?
< h5 >
< h8 >
< h6 >
< h1 >
What is the special character for >?
>
 
©
"
What are the 4 required HTML tags?
HTML, Head, Title, Body
P, B, H1, H2
HTML, Body, P, H1
Html,Meta, Head, Body
What attribute is used to centre a
paragraph?
span
font
align
justify

What would you use to link to a specific part of the page
within the document?
image
anchor
table
css
To get an image to sit on the right side of the window with text filling the area
to the left of the image, what would your tag need to look like?
<img src align="mountains.jpg" "right"/>
<img src="mountains.jpg" align="right"/>
<img="mountains.jpg" src align="right"/>
<img " mountains.jpg" align src="right"/>

<img>
The image tag allows us to insert images into a web page. It has no closing tag. The attributes of the image tag include:
•src: the source file (src)
•alt: alternative text
•width
•height
Example:
<img src="naukrilearning.jpg" alt="naukri learning" width="100" height="100">
<meta>
These meta tags are used inside the head tag and they making describe the metadata i.e data about data. These
tags are useful in search engine optimization which means when users search for our websites the chances that
the browser recommends our webpage becomes high which leads to an increase in traffic over the webpage. A
single HTML document can contain multiple tags.
Syntax:
<meta attribute-name=”value”>
<link rel =”stylesheet” href=”file.css “>
This tag is used to include external style sheets. Use this tag when you don’t want to include CSS in the HTML
document. To make it more simple we make a CSS file with the code and include this file in the link tag.
Syntax:
<link rel =”stylesheet” href=”file.css “>

Lecture-2.pptx

Recommended

Recommended

More Related Content

Similar to Lecture-2.pptx

Similar to Lecture-2.pptx (20)

More from vishal choudhary

More from vishal choudhary (20)

Recently uploaded

Recently uploaded (20)

Lecture-2.pptx