Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
8 views

HTML_Notes[1]

Uploaded by

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

HTML_Notes[1]

Uploaded by

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

HTML stands for Hypertext Mark-up Language, and it is the most widely used language to write Web

Pages.
 Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
 As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a text
document with tags that tell a Web browser how to structure it to display.

<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>

 HTML Tags: HTML is a mark-up language and makes use of various tags to format the content. These
tags are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their
corresponding closing tags. For example, <html> has its closing tag</html> and <body> tag has its closing
tag </body> tag etc. Above example of HTML document uses the following tags:

Tag Description

<!DOCTYPE...> This tag defines the document type and HTML version.

This tag encloses the complete HTML document and


mainly comprises of document header which is
<html> represented by <head>...</head> and
document body which is represented by <body>...</body>
tags.

This tag represents the document's header which can


<head>
keep other HTML tags like <title>, <link> etc.

The <title> tag is used inside the <head> tag to mention


<title>
the document title.

This tag represents the document's body which keeps


<body>
other HTML tags like <h1>, <div>, <p> etc.

<h1> This tag represents the heading

<p> This tag represents a paragraph

 HTML Document Structure


A typical HTML document will have the following structure:
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
 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.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
 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:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
 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, where you do not need opening and closing tags, as
there is nothing to go in between them.
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
</body>
</html>
 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.

<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
 Align Attributes:

<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>
 Bold Text

Anything that appears within <b>...</b> element, is displayed in bold as shown below:
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>

 Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below:
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
 Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown below:
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>

 Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a
thin line through the text as shown below:
<html>
<head> <title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
 Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as
the characters surrounding it but is displayed half a character's height above the other characters.
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>
 Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the
characters surrounding it, but is displayed half a character's height beneath the other characters.
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>
HTML – Fonts

You can use HTML <font> tag to add style, size, and color to the text on your website. The font tag is
having three attributes called size, color, and face to customize your fonts.
 You can set content font size using size attribute. The range of accepted values is from
1(smallest) to 7(largest). The default size of a font is 3.

<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>
</html>

You can set font face using face attribute but be aware that if the user viewing the page doesn't have
the font installed, they will not be able to see it.

<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>

Setting Font Color


You can set any font color you like using color attribute. You can specify the color that you want by
either the color name or hexadecimal code for that color.
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "red">This text is red</font>
</body>
</html>

HTML Anchor

The HTML anchor tag defines a hyperlink that links one page to another page. It can create hyperlink
to other web page as well as files, location, or any URL. The "href" attribute is the most important
attribute of the HTML a tag. and which links to destination page or URL. href attribute of HTML
anchor tag.The href attribute is used to define the address of the file to be linked. In other words, it
points out the destination page.
The syntax of HTML anchor tag is given below.
<a href = "..........."> Link Text </a>

<html>
<head>
<title></title>
</head>
<body>
<p>Click on <a href="https://www.javatpoint.com/" target="_blank"> this-
link </a>to go on home page of JavaTpoint.</p>
</body>
</html>
HTML Image

HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains
attributes only, closing tags are not used in HTML image element.

<h2>HTML Image Example</h2>


<img src="good_morning.jpg" alt="Good Morning Friends"/>

src:
It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server. The location of image may be on the same
directory or another server.
alt:
The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt
attribute describe the image in words.
width:
It is an optional attribute which is used to specify the width to display the image. It is not
recommended now. You should apply CSS in place of width attribute.
height:
It h3 the height of the image. The HTML height attribute also supports iframe, image and object
elements. It is not recommended now.

<img src="animal.jpg" height="180" width="300" alt="animal image">

Use <img> tag as a link

We can also link an image with other page or we can use an image as a link. To do this, put <img> tag
inside the <a> tag.

<a href="https://www.javatpoint.com/what-is-
robotics"><img src="robot.jpg" height="100" width="100"></a>

HTML 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)

In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered
list also. The ordered list starts with <ol> tag and the list items start with <li> tag.
<ol>

<li>Aries</li>

<li>Bingo</li>

<li>Leo</li>

<li>Oracle</li>

</ol>

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list
also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

<ul>

<li>Aries</li>

<li>Bingo</li>

<li>Leo</li>

<li>Oracle</li>

</ul>

Marquee HTML

The Marquee HTML tag is a non-standard HTML element which is used to scroll a image or text
horizontally or vertically. In simple words, you can say that it scrolls the image or text up, down, left
or right automatically. Marquee tag was first introduced in early versions of Microsoft's Internet
Explorer. It is compared with Netscape's blink element.

<marquee>This is an example of html marquee </marquee>

HTML Marquee Attributes

 HTML Scroll Marquee

It is a by default property. It is used to scroll the text from right to left, and restarts
at the right side of the marquee when it is reached to the end of left side. After the completion of
loop text disappears.

<marquee width="100%" behavior="scroll" bgcolor="pink">

This is an example of a scroll marquee...

</marquee>

 HTML Slide Marquee

In slide marquee, all the contents to be scrolled will slide the entire length of marquee but
stops at the end to display the content permanently.

<marquee width="100%" behavior="slide" bgcolor="pink">

This is an example of a slide marquee...

</marquee>
 HTML Alternate Marquee

It scrolls the text from right to left and goes back left to right.

<marquee width="100%" behavior="alternate" bgcolor="pink">

This is an example of a alternate marquee...

</marquee>

Direction in HTML marquee

This is used to change the direction of scrolling text. Let's take an example of marquee scrolling to
the right. The direction can be left, right, up and down.

<marquee width="100%" direction="right">

This is an example of a right direction marquee...

</marquee>

You might also like