Scribd
Upload
96 views

Hyper Text Markup Language

The document provides information on HTML (Hypertext Markup Language) including: 1) HTML uses tags to structure and present content on web pages, with tags enclosed in angle brackets. It allows embedding of images, links, lists, tables and other objects. 2) Basic requirements for writing HTML are a web browser to view pages and a text editor to write code. Popular editors include Notepad, FrontPage and Dreamweaver. 3) HTML code uses tags like <html>, <head>, <body> to define overall page structure and content. Additional tags format text, add images and other media, create links and navigation.

Uploaded by

Ashish Kumar
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
96 views

Hyper Text Markup Language

The document provides information on HTML (Hypertext Markup Language) including: 1) HTML uses tags to structure and present content on web pages, with tags enclosed in angle brackets. It allows embedding of images, links, lists, tables and other objects. 2) Basic requirements for writing HTML are a web browser to view pages and a text editor to write code. Popular editors include Notepad, FrontPage and Dreamweaver. 3) HTML code uses tags like <html>, <head>, <body> to define overall page structure and content. Additional tags format text, add images and other media, create links and navigation.

Uploaded by

Ashish Kumar
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 21

Hyper

Hyper Text
Text Markup
Markup
Language
Language
www.w3schools.com/html
Introduction
• A markup language combines text and extra
information about the text, this extra information
is contained in "tags," which are easily recognizable
by the < > symbols.

• HTML is the standard for creating web pages with


a collection of tags, or labels, for formatting
information use on the web.

• HTML can be used on the desktop for formatting


help files and documents.
Introduction
The basic requirements for writing HTML are two:
 a web browser
 a good text editor.

• We can edit HTML files using an editor like


FrontPage or Dreamweaver, instead of writing
your markup tags in a plain text file ex: notepad.

• When you save an HTML file, you can use either


the .htm or the .html extension. Every file ending
in .html will be opened by a web browser after you
click, or double-click, on it.
Writing HTML Code
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.
</body>
</html>
How to save and run HTML
code in windows
• Start Notepad.
• Type in the given text
• Save the file as “anyname.htm". 
• Start your Internet browser.
• Select "Open" (or "Open Page") in the File menu
of your browser. A dialog box will appear.
• Select "Browse" (or "Choose File") and locate the
HTML file you just created select it and click
"Open". Now you should see an address in the
dialog box, which is showing your file path. Now
Click OK, and the browser will display the page.
HTML Elements (TAGS)
• HTML tags are used to mark-up HTML elements.
• HTML tags are surrounded by the two characters
< and >.The surrounding characters are called angle brackets.
• HTML tags normally come in pairs like <b> and </b> .
• The first tag in a pair is the start tag, the second tag is the
end tag.
• The text between the start and end tags is the element
content.
• HTML tags are not case sensitive, <b> means the same as <B>.
Use lowercase tags for future work.
• Tags can have attributes. Attributes provide additional
information to an HTML element.
• Attribute values should always be enclosed in quotes. Double
style quotes are the most common, but single style quotes are
also allowed.
HTML Elements (TAGS)

• <html>..</html>: This tag tells your browser


the start and end of an HTML
document.
• <head>..</head>: This tag contains the header
information, which is not
displayed in the browser window.
• <title>..</title>: This tag contains the title of your
document. The title is displayed in
your browser's caption.
• <body>..</body>: This tag contain the text that will
be displayed in your browser.
HTML Background attributes
• The <body> tag has two attributes where you can specify backgrounds.
The background can be a color or an image.

• Bgcolor: The bgcolor attribute specifies a background-color for an


HTML page. The value of this attribute can be a hexadecimal number,
an RGB value, or a color name. Ex: The lines below all set the
background-color to black. 
<body bgcolor="#000000"> or <body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

• Background: The background attribute specifies a background-image


for an HTML page.  If the image is smaller than the browser window,
the image will repeat itself until it fills the entire browser window. Ex:
<body background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">
HTML Elements (TAGS) Cont..
• <p>..</p>: This tag defines the paragraphs in your browser.
HTML automatically adds an extra blank line
before and after a paragraph

• <br>: This tag is used when you want to end a


line, but don't want to start a new paragraph. This
tag is an empty tag. It has no closing tag.

• <!--….-->: The comment tag is used to insert a comment


in the HTML source code. A comment will be

ignored by the browser. You can use comments to


explain your code, which can help you when you
edit the source code at a later date.

CODE HTML
Text Formatting Tags
• <font>..</font>: Defines the sizes, faces and colors of the
fonts on your web page. It has 3 attributes:
face: define the type of font (name)
size: define the size of font (numeric value)
color: defines the color of font (name/RGB/hexadecimal)
• <b>..</b>: Defines bold text
• <big>..</big>: Defines big text
• <em>..</em: Defines emphasized text
• <i>..</i>: Defines italic text
• <small>..</small>: Defines small text
• <strong>..</strong>: Defines strong text
• <sub>..</sub>: Defines subscripted text
• <sup>..</sup>: Defines superscripted text
• <strike>..</strike>: defines strike tag

CODE HTML
HTML Alignment and pre
formatted text tags
• <center> ..</center>: indicates a section that is center
aligned.

• <left> ..</left>: indicates a section that is left aligned.


•
• <pre>..</pre>: is one the handiest tags in the HTML
toolbox. It marks the text as
“preformatted" – all the spaces and
carriage returns are rendered
exactly as you type them.

CODE HTML
HTML Lists
• <ul>..</ul>: defines an unordered list of items.
The list items are marked by bullets.
• <ol>..</ol>: defines an ordered list of items. The
list items are marked with numbers.
• <li>..</li>: each list item starts with this tag.
• <dl>..</dl>: defines a Definition Lists. This is a list
of terms and explanation of the terms.
• <dt>..</dt>: each definition-list term starts with
this tag.
• <dd>..</dd>: Each definition-list definition starts
with this tag.
CODE HTML
Horizontal Line tag
• <HR>:This tag draws a horizontal line (a "horizontal
rule") across the page. It has no end tag. It indicates
a division in the page. Stuff before the rule is in a
different "section" from the stuff after. It has 4
optional attributes:
size: define the height of line (numeric value)
width: define the width of line in pixels.
(numeric)
align: define the alignment of line.
(left/right/center)
color: define the color of line
(name/RGB/hexadecimal)
The Anchor Tag <a>..</a>
An anchor can point to any resource on the Web: an HTML
page, an image, a sound file, a movie, etc.

• the Href Attribute:


<a href="url">Text to be displayed</a>

• The Target Attribute:


It define where the linked document will be opened. The
line below will open the document in a new browser window.

<a href=“1.htm“ target="_blank">Visit yahoo homepage!</a>


Inserting Image <img>
In HTML, images are defined with the <img> tag. It has no closing
tag.

• the Src (source) Attribute:


To display an image on a page. The value of the src
attribute is the URL of the image you want to display on
page.
<img src=“http://www.w3schools.com/images/boat.gif”>.

• The Alt (alternate text) Attribute:


The alt attribute is used to define an "alternate text"
for an image. The value of the alt attribute is text:

<img src="boat.gif" alt="Big Boat">

CODE HTML
HTML Tables
• <table>..</table>: Tables are defined with this tag.

• <tr>..</tr>: define a row in the table.

• <td>..</td>: each row is divided into data cells. A data cell


can contain text, images, lists, paragraphs,
forms, horizontal rules, tables, etc.

• <th>..</th>: this tag defines headings in a table

• the Border Attribute


If you do not specify a border attribute the table will be
displayed without any borders. To display a table with
borders, the border attribute is used (numeric value).

CODE HTML
HTML Frames
To display more than one HTML document in the same browser
window. Each HTML document is called in a frame, and each frame is
independent of the others.

• <frameset>..</frameset>:
defines how to divide the window into frames. Each frameset
defines a set of rows or columns. The values of the rows/cols
attributes is the amount of screen area each row/column will occupy.

• <frame>..</frame>: defines what HTML doc to put into each


frame.

Frame tag has partition only, not the body tag (or page definition).

CODE HTML
HTML Forms
• <form>..</form>:
A form is an area that can contain form elements. Form
elements are elements that allow the user to enter
information in a form.

• <input>..</input>:
The type of input is specified with the type attribute. The
value of types are text, radio, button, submit, textarea,
checkbox, select (option).

CODE HTML
Assignment
• In this assignment, you will create three linked web pages on
you and your interests.

• Page 1- Home page: Create a webpage which explains who


you are. It should contain the following topics, reflecting
your personality:
– • interests
– • hobbies
– • favorites (or current) reading list
– • favorite movie list
– • current academic
– • social interests and activities
• Page 2 - Schedule page: Using tables, create your current
work and school schedule.
• Page 3 - Interests page: The third page containing your
ten favorite websites with a short paragraph about them
(two sentences). clear links to other portions of your
webpage.
More on Forms
•   <INPUT TYPE="CHECKBOX" NAME="sendmail" VALUE="send" CHECKED>

•   <INPUT TYPE="SUBMIT" NAME="submit" VALUE="Sign Me Up!">


• <INPUT TYPE="RADIO" NAME="rating" VALUE="excellent">Excellent !!!
<BR>

• <SELECT NAME="shipping">  
 <OPTION VALUE="1"> Standard  
 <OPTION VALUE="2"> 2-day  
 <OPTION VALUE="3"> Overnight
</SELECT>
OR
• <SELECT MULTIPLE NAME="interests" SIZE="4">  

•  <TEXTAREA NAME="suggestions" ROWS="5" COLS="25"></TEXTAREA>


• <INPUT TYPE="FILE" NAME="name" VALUE="filename">
Assignment cont…
• Use the following (minimum) formatting or web elements in
your pages:
– Paragraph breaks <P> and line breaks <BR>
– Horizontal rule(s) <HR>
– At least one table
– An un-ordered list (this is an un-ordered list)
– Use 2 colors in the background or in the tables within
the same page
– At least one image per page.

You might also like