HTML was created by Tim Berners Lee .HTML 2.0 was the first standard html specification which was published in 995.though HTML 4.0 version is widely used but currently we are having HTML-5.2 version
What is HTML?
HTML is a computer language devised to allow website creation. HTML stands for HYPER T EXT MARKUP LANGUAGE , which is the most widely used language on webto develop web pages.
The definition of HTML
Hypertext is the method by which you move around on the web – byclicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is mot linear . i.e. you can go to any place on the internet whenever you want by clicking on links .
Markup is what HTML tags do to the text inside them they mark it as a certain type of text.HTML is language, as it has code-words
Structure of html
<html>
<head>
<title>
title of the web page
</title>
</head>
<body>
content of the web page
</body>
</html>
Here <html>tag it should appear at the beginning of your document .</html> it should appear at the end of your document.
Tags of html
Heading tags
Any documents starts with a heading. you can use different sizes for your headings HTML six level of headings. Which use the elements<h>,<h2>,<h3>,<h4><h5>,<h6> while display any heading ,browser adds one line before and one line after that heading.
<html>
<head>
welcome to my blog
</head>
<body>
<p>hello guys welcome to my blog i am tell you about what is
html and their tags</p>
</body>
</html>
Formatting tags
1. Bold text
Anything appear within <b>…</b> element, is displayed in
bold.
<html>
<head>
<title> bold text
</title>
</head>
<body>
<p>welcome to my <b>blogging</b></p>
</body>
</html>
2. Italic text
Anything that appear within <i>…</i>element isw displayed in italicized.
<html>
<title> italic tag
</title>
<head> </head>
<body>
<p><i>welcome to my blogging</i></p>
</body>
</html>
3.underline text
Anything that appear within <u>…</u>element is displayed
with underline.
<html>
<head>
<title> underline tag
</title>
</head>
<body>
<p>welcome to my <u>blogging</u></p>
</body>
</html>
4.strike text
Anything that appears within <strike>…</strike>element is
displayed with strikethrough, which is a thin line through the
text
<html>
<head>
<title> underline tag
</title>
</head>
<body>
<p>I am a <strike>college</strike> student </p>
</body>
</html>
5. Superscript text
The content of a <sup>…</sup>element is written in
superscript the same size as the character surrounding it but
is displayed half a character `s height above the other
character.
<html>
<head>
<title> superscript tag
</title>
</head>
<body>
<p>my 1<sup>st</sup>book is published</p>
</body>
</html>
6.subscrip text
The content of a <sub>…</sub>element written in subscript
the font size used is the same as the characters surrounding it
, but is display half a character’s height beneath the
characters.
<html>
<head>
<title> subscript tag
</title>
</head>
<body>
<p>water molecule is H<sub>2</sub> </p>
</body>
</html>
7. delete tag
The html <del>element defines text that has been deleted
from a document .browsers will usually strike a line through
deleted text.
<html>
<head>
<title> delete tag
</title>
</head>
<body>
<p>my favorite color is <del>blue</del>red. </p>
</body>
</html>
8.insert tag
The html <ins>element defines a test that has been inserted
into a document. Browsers will usually underline inserted text.
<html>
<head>
<title> insert element
</title>
</head>
<body>
<p>my favorite color is <del>blue</del><ins>red</ins>. </p>
</body>
</html>
larger text
the content of the <big>...</big>element is displyed one font larger than the rest of the text surrounding it.
<html>
<head>
<title> larger text
</title>
</head>
<body>
<p>my favorite color is <big>blue</big>. </p>
</body>
</html>
smaller text
the cotent of the <small>...</small>element is displayed one
font size smaller than the rest of the srounding it.
<html>
<head>
<title>smaller text</title>
</head>
<body>
<p>my favorite color is <small>blue</small>. </p>
</body>
</html>
HTML LIST TAG
List provides methods to layout item or elements sequence in a HTML document HTML provides unordered, ordered and definition list types.
Both ordered and and unordered list required start and end tags as well as the use of a special elements to indicates where each list item begins the<li>tag and end with</li>tag
Unordered list
An unordered list is collection of related items that have no special order or sequence this list is created by using HTML <ul>tag each item in the list is marked with a bullet.
Type of attribute use in this tag
You can use type attribute for <ul> tag to specify the type of bullet you like. By default it is a disc .
Following are the possible option.
<u>type=”square”>
<u>type=”circle”>
<u>type=”disc”
· The type of bullet can be suggested with the<type> attribute. The circle attribute value is used for a hollow bullet, the disc type creates a solid bullet, and the square attribute value renders a solid block
· The default appearance for a list is with a disc.
· You can use an optional </ul> end tag at the end of each list item.
Eg
<head>
<title>
HTML UNORDER LIST
</title>
</head>
<body>
<ul type=”sqare”>
<li><b>c programming
<li>java script
<li>python
</b></ul>
</body>
</htm;>
Order list
If you required to put your items in numbered list instead of bulleted then HTML ordered list will be used .this list is created by using <ol> tag . the numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.
<html>
<head>
<title>
HTML ORDERED LIST
</title>
</head>
<body>
<ol>
<li><b>c programming
<li>java script
<li>python
</b></ol>
</body>
</htm;>
The type of attributes :
You can use type attribute for <ol> tag to specify the type of numbering you like by default it is a number .
Following are the possible options.
<ol type=””> -default _case numbers.
<ol type=”I”> _upper case numbers.
<ol type =”i”> - lower –case numbers.
<ol type =”a”> -lower –case letters.
<ol type=”A”> - upper – case letters.
<html>
<head>
<title>
HTML ORDERED LIST
</title>
</head>
<body>
<ol type”I”>
<li><b>c programming
<li>java script
<li>python
</b></ol>
</body>
The start attribute
You can use start attribute for<ol>tag to specify the starting point of numbering you need .
Following possible options
<ol type=” ” start=”5”> number start with 5
<ol type=”I ” start=”5”> number start with V
<ol type=”i ” start=”5”> number start with v
<ol type=” a” start=”5”> letter start with e
<ol type=” A” start=”5”> letter start with E
<html>
<head>
<title>
HTML ORDERED LIST
</title>
</head>
<body>
<ol type”I” start=”5”>
<li><b>c programming
<li>java script
<li>python
</b></ol>
</body>
HTML DEFINATION LISTS
HTML and XHTML support a list style which is called definition list where are like in a dictionary or encyclopedia the definition lis is the ideal way to present a glossary list of terms or other name /value list.
Definition list makes use of following three tags
§ <dl> -defines the start of the list
§ <dt> -a term
§ <dd> -term definition
§ </dl> -defines of end of the list
<html>
<head>
<title>
HTML definition lists
</title>
</head>
<body>
<dl>
<dt><b>HTML </b></dt>
<dd>HTML stand for hyper text markup language</dd>
<dt><b>website</b></dt>
<dd>a website is a group of web pages that have information in the various pages contain similar subject materials. </dd>
</body>
</html>
HTML IMAGE TAG
Images are very important to beautify as well as to depict many complex concept in simple way on your web page this tutorial will take you thought simple steps to use images in your web pages.
Insert image
You can insert any images in your web page by using <img>tag
Syntax
<img>src=” image URL”…attributes list>
The <img > tag is an empty tag, which means that it can contain only list of attributes and it has no closing tag.
You can use PNG, JPEG ,OR GIF image file based on your comfort but make sure you specify correct image file name in src attribute . Image name is always case sensitive.
<html>
<head>
<title>
insert image
</title>
</head>
<body>
<img src="C:\Users\Kavita\Pictures\Apowersoft\Apowersoft Photo Viewer\Favorites\mango.png">
</body>
</html>
Set image width/height
You can set image and height based on your requirement using width and height attributes you can specify width and height of the image in terms of either pixels or percentage of its actual size.
Set image border
By default image will have a border around it you can specify border thickness in terms of pixels using border attributes a thickness of 0 means, no border around the picture.
Set image alignment
By default image will align at the left side of the page,but you can use align attribute to set it in the center or right.
<html>
<head>
<title>
set image width/height
</title>
</head>
<body>
<img src="C:\Users\Kavita\Pictures\Apowersoft\Apowersoft Photo Viewer\Favorites\mango.png" width="200" height= "200" border ="3" align ="right">
</body>
</html>
MEDIA ELEMENTS
VIDEO TAG
The video tag is used to display a video , such as a movie clip or other video streams currently there are 3 supported video formats for the <video>element MP4,Webm,Ogg
<html>
<head>
<title>
set image width/height
</title>
</head>
<body>
<Video width=”320” height =”240”>
<Source src =”C:\Users\Kavita\Videos\video.mp4”>
</vidio>
</body>
</html>
(Some times some browser may not support one or two format )
COPYRIGHT ©2020
#COMPUTICSPLUS
No comments:
Post a Comment