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

Introduction To HTML - Developer

HTML is the standard markup language used to create web pages. It uses tags to define headings, paragraphs, lists, and other elements. Some key HTML tags include <h1> for main headings, <p> for paragraphs, <b> for bold text, <i> for italics, and <img> for images. HTML pages have a basic structure with <html>, <head>, and <body> tags. Attributes provide extra information about elements. Common editors like Notepad can be used to write HTML, which is then displayed in browsers.

Uploaded by

DAYANI ISHA
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
67 views

Introduction To HTML - Developer

HTML is the standard markup language used to create web pages. It uses tags to define headings, paragraphs, lists, and other elements. Some key HTML tags include <h1> for main headings, <p> for paragraphs, <b> for bold text, <i> for italics, and <img> for images. HTML pages have a basic structure with <html>, <head>, and <body> tags. Attributes provide extra information about elements. Common editors like Notepad can be used to write HTML, which is then displayed in browsers.

Uploaded by

DAYANI ISHA
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

1 INTRODUCTION TO HTML

What is HTML?
HTML is the standard markup language for creating Web pages.

 HTML stands for Hyper Text Markup Language.


 HTML was invented by Berners-Lee.
 HTML describes the structure of Web pages using markup.
 HTML elements are the building blocks of HTML pages.
 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.

HTML Versions

Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

HTML Editors Browsers


 Notepad  Google Chrome
 Notepad++  Mozilla Firefox
 SubLime Text  Opera
 Dream Viewer  Internet Explorer
 NetBeans etc..  Safari etc...
2 INTRODUCTION TO HTML

HTML Tags
 There are two types of tags..
o Container Tag / Pair Tag
o Singular Tag / Unpair Tag

Syntax :

<tagname>content goes here...</tagname>

 HTML tags normally come in pairs like <p> and </p>


 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a forward slash inserted before the
tag name

HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

</body>
</html>

 The <!DOCTYPE html> declaration defines this document to be HTML5.


 The <html> element is the root element of an HTML page.
 The <head> element contains meta information about the document.
 The <title> element specifies a title for the document.
 The <body> element contains the visible page content.
3 INTRODUCTION TO HTML

HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body [bgcolor=“color-name”] => Set Background color for body
[text=“color-name”] => Set Text / Font Color in body
[link=“color-name”] => Set Link color in body
[alink=“color-name”] => Set Active Link color in body
[vlink=“color-name”] => Set Visited Link color in body
[background=“url”] > => Set a Background Image in body

</body>
</html>

Heading Tag
 The <h1> element defines a large heading.

Syntax:

<hx [title=“text”] => add tips for any Heading tags


[align=“center|left|right”] => align text left, right or center in a page >
</hx>
X = 1, 2, 3, 4, 5, 6
4 INTRODUCTION TO HTML

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Creative College Of Computer Application</h1>


<h2>Creative College Of Computer Application</h2>
<h3>Creative College Of Computer Application</h3>
<h4>Creative College Of Computer Application</h4>
<h5>Creative College Of Computer Application</h5>
<h6>Creative College Of Computer Application</h6>

</body>
</html>

Font Size :

Tag Font Size


Normal Text 16px ( Times New Roman )
<h1> 32px
<h2> 24px
<h3> 18px
<h4> 16px
<h5> 13px
<h6> 10px

HTML Comment Text


 With comments you can place notifications and reminders in your HTML code.

Syntax :

<!-- Write your comments here -->


5 INTRODUCTION TO HTML

BR Tag :
<br> => Break Row

 The <br> tag inserts a single line break.


 The <br> tag is useful for writing addresses or poems.
 The <br> tag is an empty tag which means that it has no end tag.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

Be not afraid of greatness.<br>


Some are born great,<br>
some achieve greatness,<br>
and others have greatness thrust upon them.

</body>
</html>

HTML Formatting Elements

 In the previous chapter, you learned about the HTML style attribute.
 HTML also defines special elements for defining text with a special meaning.
 HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
 Formatting elements were designed to display special types of text:
6 INTRODUCTION TO HTML

 <p> - Paragraph text

o The <p> tag defines a paragraph.


o Example:
 <p> This is some text in a paragraph. </p> .
o Output:
 This is some text in a paragraph.

 <b> - Bold text


o To display text with BOLD effect we can use <B> tag.
o Example:
 This is normal text - <b>and this is bold text</b>.
o Output:
 This is normal text - and this is bold text.

 <strong> - Important text


o The <strong> tag is used to define text with strong importance.
o Example:
 This is normal text - <strong> and this is Important text</strong> .
o Output:
 This is normal text - and this is Important text.
 <i> - Italic text
o The content inside is typically displayed in italic.
o Example:
 This is normal text - <i> and this is Italic text</i> .
o Output:
 This is normal text - and this is Italic text.
7 INTRODUCTION TO HTML

 <em> - Emphasized text


o The <em> tag is used to define emphasized text.
o Example:
 This is normal text - <em> and this is Emphasized text</em> .
o Output:
 This is normal text - and this is Emphasized text.

 <address>
o The <address> tag defines the contact information for the author/owner of a
document or an article.
o The contact information can be an email address, URL, physical address, phone
number, social media handle, etc.
o Example:
 <address>
Written by Creative.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
o Output:
 Written by Creative .
Visit us at:
Example.com
Box 564, Disneyland
USA

 <strike> / <del> / <s>


o The <strike> tag was used in HTML 4 to define strikethrough text.
o The <del> tag defines text that has been deleted from a document.
o The <s> tag specifies text that is no longer correct, accurate or relevant.
8 INTRODUCTION TO HTML

o Example:
 <p>Price <strike>350$</strike> 300$</p>
 <p>Price <del>350$</del> 300$</p>
 <p>Price <s>350$</s> 300$</p>
o Output:
 Price 350$ 300$
 <sup>
o The <sup> tag defines superscript text.
o Superscript text appears half a character above the normal line, and is
sometimes rendered in a smaller font.
o Example:
 <p>X <sup>2</sup></p>
o Output:
 X2

 <sub>
o The <sub> tag defines subscript text.
o Subscript text appears half a character below the normal line, and is sometimes
rendered in a smaller font.
o Example:
 <p>H <sup>2</sup>O</p>
o Output:
 H2O

 <big>
o The <big> tag was used in HTML 4 to define bigger text.
o Example:
 <p> This is a normal paragraph. </p>
 <big> This is a bigger paragraph. </big>
9 INTRODUCTION TO HTML

o Output:
 This is a normal paragraph.
 This is a bigger paragraph.
 <small>
o The <small> tag was used in HTML 4 to define smaller text.
o Example:
 <p> This is a normal paragraph. </p>
 <big> This is a smaller paragraph. </big>
o Output:
 This is a normal paragraph.
 This is a smaller paragraph.
 <pre>
o The <pre> tag defines preformatted text.
o The text will be displayed exactly as written in the HTML source code.
o Example:
 <pre> Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks</pre>

o Output:

 <font>
o The <font> tag was used in HTML 4 to specify the font face, font size, and color
of text.
o Syntax:
10 INTRODUCTION TO HTML

 <font color=”color-name” size=”number (1 to 7)” face=”font-name”


>…Content Here…</font>
o Example:
 <font color=”red” size=”4” face=”calibri”> Hellooo…! Good Afternoon
</font>
o Output:

 Hellooo…! Good Afternoon


 <hr>
o The <hr> element is most often displayed as a horizontal rule that is used to
separate content (or define a change) in an HTML page.
o Syntax:
 <hr [align=”left | center | right”]
[size=”Pixel”] => Height
[width=”Pixel or Percent”]
[color=”color-name”]>
o Example:

o Output:
11 INTRODUCTION TO HTML

 <marquee>
o The <marquee> tag is a container tag of HTML is implemented for creating
scrollable text or images within a web page from either left to right or top to
bottom.
o Syntax:
<marquee [behavior=“Scroll | Slide | Alternate”]
[direction=“Left | Right | Up | Down”]
[loop=“1 | 2 | …N”]
[scrollamount=”number”]
[bgcolor=“Color Name”]
[height=“pixels”]
[width=“pixels”] >……</marquee>

o Example:
 <marquee behavior="scroll" direction="up" scrollamount="1">Slow
Scrolling</marquee>
 <marquee behavior="scroll" direction="right" scrollamount="12">Little
Fast Scrolling</marquee>
 <marquee behavior="scroll" direction="left" scrollamount="20">Fast
Scrolling</marquee>
 <marquee behavior="scroll" direction="right" scrollamount="50">Very
Fast Scrolling</marquee>
12 INTRODUCTION TO HTML

 <a>
o The <a> tag defines a hyperlink, which is used to link from one page to another.
o The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
o Syntax:
<a [href=“URL”]
[target=“_blank”] >…</a>

o Example:
 <a href="https://www.cdmi.in" target="_blank">Visit cdmi.in!</a>
o Output:
 Visit cdmi.in

 <img>
o The <img> tag is used to embed an image in an HTML page.
o The <img> tag has two required attributes:
 src - Specifies the path to the image
 alt - Specifies an alternate text for the image, if the image for some
reason cannot be displayed
o Syntax:
<img [alt=“AlternativeText]
[border=“border-width”]
[height=“pixels”]
[width=“pixels”]
[hspace=”pixels”] => Horizontal Margin
[vspace=“pixels”] > => Vertical Margin

o Example:
<img src=”your image path here” width=”500” border=”5” alt=”Creative
College” >
13 INTRODUCTION TO HTML

List Creation Tags


 <ol> - Ordered List
o <li> - List Item
 <ul> - Unrdered List
o <li> - List Item
 <dl> - Description List
o <dt> - Defination Term
o <dd> - Defination Desription

 <ol> - Ordered List :


o The <ol> tag defines an ordered list. An ordered list can be numerical or
alphabetical.
o The <li> tag is used to define each list item.
o Syntax :
<ol [start=”value”] [type=”A | a | I | I | 1”] [reversed]>
<li>……..</li>
</ol>
o Example :
<ol start=”5” type=”A”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
o Output :
E. Coffee
F. Tea
G. Milk
14 INTRODUCTION TO HTML

 <ul> - Unordered List :


o The <ul> tag defines an unordered (bulleted) list.
o Use the <ul> tag together with the <li> tag to create unordered lists.
o Syntax :
<ul [type=”disc | circle | square”] >
<li>……..</li>
</ul>
o Example :
<ul type=”square”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
o Output :
 Coffee
 Tea
 Milk

 <dl> - Description List :


o The <dl> tag defines a description list.
o The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd>
(describes each term/name)..
o Syntax :
<dl >
<dt>……..</dt>
<dd>……..</dd>
</dl>
o Example :
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
o Output :
Coffee
Black hot drink
Milk
White cold drink
15 INTRODUCTION TO HTML

Tables in HTML
o The <table> tag defines an HTML table.
o An HTML table consists of one <table> element and one or more <tr>, <th>, and <td>
elements.
o The <caption> tag defines a Table Caption.
o The <tr> element defines a Table Row.
o The <th> element defines a Table Header.
o The <td> element defines a Table Cell.

 <table> :
o Syntax:

<table align="[left | center | right]"


border="value"
width="value/percent"
height=" value/percent"
bordercolor="color"
bgcolor="color"
cellpadding="value"
cellspacing="value">…..</table>

 <caption> :
o Syntax:

< caption align="[left | center | right]">………</caption>

 <tr> :
o To add a new row in a table we must use TR tag
o Syntax:

<tr bgcolor="color">………</tr>
16 INTRODUCTION TO HTML

 <th> :
o The text in <th> elements are bold and centered.
o Each table header is defined with a <th> tag.
o Syntax:

<th align="[left | center | right]"


valign="[bottom | middle | top]"
width="pixel"
height=" pixel"
bgcolor="color"
colspan="value"
rowsapn="value">…..</th>
 <td> :
o Each table data/cell is defined with a <td> tag.
o Syntax:

<td align="[left | center | right]"


valign="[bottom | middle | top]"
width="pixel"
height=" pixel"
bgcolor="color"
colspan="value"
rowsapn="value">…..</td>
17 INTRODUCTION TO HTML

 Example : Design a web page to display TABLE as given…


18 INTRODUCTION TO HTML
19 INTRODUCTION TO HTML

HTML Form Elements


o An HTML form is used to collect user input.
o The user input is most often sent to a server for processing.
o Syntax:
<form method="[ get | post ] " action="URL" name="form name">
form elements
</form>

 The <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.
 Form Methods :
o GET :
 Get method will DISPLAY all the information of page in to URL.
 Note : Some of Browser will note display information on URL by
GET...
o POST :
 POST method will HIDE all the information of page in to URL.

<input> Elements

 The HTML <input> element is the most used form element.


 An <input> element can be displayed in many ways, depending on the type attribute.

Type Description
HTML Form Elements
<input type="text"> Displays a single-line text input field
<input type="password"> Displays text as a password
<input type="radio"> Displays a radio button (for selecting one of many choices)
Displays a checkbox (for selecting zero or more of many
<input type="checkbox">
choices)
<input type="submit"> Displays a submit button (for submitting the form)
20 INTRODUCTION TO HTML

<input type="reset"> Reset form controls


<input type="button"> Displays a clickable button
HTML5 Form Elements
<input type="color"> Displays a color picker box.
<input type="date"> Displays a date box.
<input type="time"> Displays a time box.
<input type="datetime-local"> Displays a date with time box.
<input type="month"> Displays a month box.
<input type="week"> Displays a week box.
<input type="number"> Displays a number box.
<input type="range"> Displays a range bar.
<input type="email"> Displays a email box.
<input type="url"> Displays a url box.
<input type="file"> Displays a Choose File Button.

o Syntax:
<input type=“Control Type”
[Name=“Name of Control”]
[Value=“DefaultValue”]
[MaxLength=“IntLen”]
[Size=“InputBoxLen”]
[ReadOnly][Disabled]
[Align=“Left|Right”]
[Checked=“Checked”] >

 <textarea> :
o The <textarea> tag defines a multi-line text input control.
o The <textarea> element is often used in a form, to collect user inputs like
comments or reviews.
21 INTRODUCTION TO HTML

o The size of a text area is specified by the <cols> and <rows> attributes (or with
CSS).
o Syntax :
< textarea [Name=“Control Name”]
[Cols=“IntColumns”]
[Rows=“IntRows”]
[Disabled] [ReadOnly]
[Wrap=“Off | Physical”] >
Default Text…
</ textarea >

Example :
< textarea cols="22" rows="4" placeholder="Address"></ textarea >

 <select> :
o The <select> element is used to create a drop-down list.
o The <select> element is most often used in a form, to collect user input.
o Syntax:
< select [Name=“Control Name”]
[Disabled] [Multiple]
[Size=“Input Num of Character”] >
<option>….</option>
</select>

 <option> :
o The <select> element is used to create a drop-down list.
o The <select> element is most often used in a form, to collect user input.
o Syntax:
<option [Name=“Control Name”]
22 INTRODUCTION TO HTML

[Value=“Initial Value”]
[Selected]>…….</option>

Example :

< select >


<option>--Select City--</option>
<option>Surat</option>
<option>Vapi</option>
<option>Baroda</option>
<option>Valsad</option>
<option>Navsari</option>
</ select >

Design a Student Data Entry Form using form and input elements.
23 INTRODUCTION TO HTML

HTML5 – Overview

o HTML5 is the next major revision of the HTML standard. HTML5 is a standard for
structuring and presenting content on the World Wide Web.
o HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the
Web Hypertext Application Technology Working Group (WHATWG).
o Syntax:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header>
Your Content Here...
</header>
<nav>
Your Content Here...
</nav>
<section>
<article>
Your Content Here...
</article>
<article>
Your Content Here...
</article>
<aside>
Your Content Here...
</aside>
</section>
<footer>
Your Content Here...
</footer>
</body>
</html>
24 INTRODUCTION TO HTML

Frames in HTML

o <iframe>:
o The <iframe> tag specifies an inline frame.
o An inline frame is used to embed another document within the current HTML
document.
o Syntax:
<iframe src="URL" width="pixel/percent" height="pixel">
</iframe>

o Example:
<iframe src="https://www.cdmi.in/" width="50%" height="700">
</iframe>
25 INTRODUCTION TO HTML

o Audio:
o The <audio> tag is used to embed sound content in a document, such as music
or other audio streams.
o There are three supported audio formats in HTML: MP3, WAV, and OGG.
o To play an audio file in HTML, use the <audio> element:
o Syntax :
<audio controls>
<source src="Your path here"

type="[audio/mpeg | audio/ogg | audio/wav] ">


</audio>

o Example :

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>

o Output :

o Video:
o The <video> tag is used to embed video content in a document, such as a movie
clip or other video streams.
o The <video> tag contains one or more <source> tags with different video
sources. The browser will choose the first source it supports.
o Syntax :
<video controls autoplay loop muted width height>
<source src="Your path here"
26 INTRODUCTION TO HTML

type="[video/mp4 | video/ogg | video/webM] ">


</video>

o Example :

<video width="320" height="240" controls>


<source src="movie.mp4" type="video/mp4">
<source src="movie.mp4" type="video/ogg">
</video>
o Output :

You might also like