Scribd
Upload
267 views

Markup: Language

1. The document explains what HTML is and how it is used to create web pages. It describes HTML tags, elements, and basic page structure. 2. Key points covered include: HTML is a markup language used to define the structure and layout of web pages; HTML uses tags to provide formatting and links; web pages are HTML documents displayed in browsers; common tags are used for headings, paragraphs, lists, and images. 3. The document provides examples of key HTML tags and attributes and explains how to write basic HTML code to structure a simple web page.

Uploaded by

Sarabjit Bagga
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
267 views

Markup: Language

1. The document explains what HTML is and how it is used to create web pages. It describes HTML tags, elements, and basic page structure. 2. Key points covered include: HTML is a markup language used to define the structure and layout of web pages; HTML uses tags to provide formatting and links; web pages are HTML documents displayed in browsers; common tags are used for headings, paragraphs, lists, and images. 3. The document provides examples of key HTML tags and attributes and explains how to write basic HTML code to structure a simple web page.

Uploaded by

Sarabjit Bagga
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 23

What is HTML?

 Web Pages are created using HTML syntax.

 HTML stands for Hyper Text Markup Language  HTML is not a programming language, it is a markup language . HTML is interpreted by a browser. Web pages are also called HTML documents.

HTML is a set of special codes that can be embedded in text to add formatting and linking information. What Is Markup language? Markup languages are designed for the processing, definition and presentation of text. The language specifies code for formatting, both the layout and style, within a text file. The code used to specify the formatting are called tags. HTML is an example of a widely known and used markup language.
 A markup language is a set of markup tags  HTML uses markup tags to describe web pages

HTML Documents / Web Pages HTML documents are also called as web pages . Web pages are files that travel across the internet and carry information from a server to a client. and The individual who develops these web pages is called Web Developer. HTML documents contain HTML tags and plain text The purpose of a web browsers (like Internet Explorer) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the contents of the page:

HTML Tags
HTML markup tags are usually called HTML tags. Tags are instructions that are embedded directly into the text of the document. These are signal to the browser that it should do something other than just throw text up on the screen. HTML tags are keywords surrounded by angle brackets like <html>

Types OF Tags
1. Paired Tags:  A tag is said to be paired tag if it is with its companion tag. e. g. <B>imed</B>  The effect of paired tag is applied to only text they contain.  The first tag in a pair is the start tag, the second tag is the end tag  Start and end tags are also called opening tags and closing tags.  opening tag activates the effect and closing tag turns the effect off.

2. Singular Tags/Stand-alone Tags:  A tag is said to be singular tag if it is without its companion tag. e.g. <BR>  The above tag does not require companion tag.

Tag Attributes:
 Some HTML tags requires some additional information to be supplied to them. This additional information supplied to the tag is called as tag attributes.  Attributes are written immediately following the tag, separated by space.  Multiple attributes can be associated with tag, separated by a space.

1.

Steps To Create a Web Page: Create textual content of the web page through simple ASCII editor such as Notepad. Save it as filename.htm View the contents of the file in a browser (Internet Explorer / Netscape navigator)

2. 3.

Structure Of HTML Program:


The structure of HTML program is divided into two sections. 1. Document Head 2. Document Body 1. Document Head
 Information in this section is essential to the inner workings of the documents .  All the information placed within this is not displayed in the browser. (exception Title Tag)  The HTML tags used to start and end the head section are,

<head> <title> </title> </head>

2. Document Body
The tags used to indicate the start & end of the main body of textual information are: <body> </body>

Attributes Of Body Tag:


1. BGCOLOR:
Changes the default background color to whatever color is specified with this tag. The user can specify a color by name or its equivalent hexadecimal number.

2. Background
Specifies the name of the gif file that will be used as the background of the document. This gif tiles up across the page to give a background.

3. Text
Changes the body text color from its default value to the color specified with this attribute.

Example: < body background = sample.gif text=red>

Titles & Footers: Title: A web page could have a title that describes what the page is about. The text included between this tag shows up in the title bar of the browser window. <title>.. </title> Footer: <address>.. </address> This tag should ideally be placed immediately after the last line of the textual material of the web page. However it can be also placed anywhere in the body of the document. The text typed within this tags always appears in italics.

Text Formatting
 Paragraph Breaks: <P> This tag causes the browser moves onto a new line, skipping one line between the previous line and new line.  Line Breaks: When text needs to start from a new line and not continue on the same line (without skipping a blank line) , <BR> tag should be used. The tag simply jumps to the start of the next line.

Emphasizing Material In A Web Page: HTML Headings HTML provides different styles to break text into logical sections with visual appeal. Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>

Heading Styles:
 HTML supports six different levels of headings. <H1> to <H6>.  All the styles appear in BOLDFACE  Size of heading depends on the level chosen.  As the number increases the font size decreases.  e.g.

<H2>Bharati Vidyapeeth University</H2>

Use the HTML heading tags for headings only. Don't use headings to make something BIG or bold. Search engines use your headings to index the structure and content of your web pages. Since users may skip your pages by its headings, it is important to use headings to show the document structure. H1 headings should be used as main headings, followed by H2 headings, and less important H3 headings, and so on.

Drawing Lines: Tag <HR>: It draws lines and horizontal rules. Attributes: 1] Align Aligns the line on the Browser screen (by default align to center
of the screen) Align = LEFT Align = RIGHT Align = CENTER

2] Size Changes the size of the rule. 3] Width Sets the width of the rule.
<HR Align = LEFT Width=10 Size=4>

Text Styles:

1] Bold : <B> Bharati Vidyapeeth </B> Displays the text in Boldface style. 2] Italics: Displays the text in Italics. <I> Bharati Vidyapeeth </I> 3] Underline: Displays the text as underlined. <U> Bharati Vidyapeeth </U>

Other Text Effect:


Centering (Text, Image): Center tags are used to center everything found between them- text, lists, images, rules, tables or any other page element. <center> Welcome! </center> Spacing (Indenting Text):
The <spacer> tag used for inserting blank spaces in an HTML document.

Attributes Of Spacer Tag: TYPE: To specify whether space to be left horizontally or vertically. SIZE: Indicates the amount of space to be left.
<spacer type=horizontal size=50> Welcome to IMED!

Controlling Font Size and Color: All the text specified in this tag will appear in the font. Attributes Face: Sets the font to the specified font name. Size: Sets the size of the text. It can take values from 1 to 7. The default size used is 3. It can also be set relative to the default size. size= +x, where x is any integer value and will add up to the default size. Color: Sets color of the text.

<Font Face=Arial size=5 color= red> </Font>

Assignment 1 Design a web page that displays the information of IMED institute using text formatting.

HTML Comments

Comments can be inserted in the HTML code to make it more readable and understandable. Comments are ignored by the browser and not displayed. Comments are written like this: <!-- This is a comment -->
Note: There is an exclamation point after the opening bracket, but not before the closing bracket.

HTML Output - Useful Tips


You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one space, and any number of spaces count as one space.

HTML Assignment 1 Create a page that includes the following elements: Web page title (displayed in title bar of browser window): My Favorite Things Use a color for the background of your site. A centered heading (use the largest heading size) of: My Favorite Things Include a horizontal rule underneath the heading that is colored, centered, 75% of the screens width and has a size of 8. Include the following introductory paragraph, filling in the blanks with the appropriate information for yourself. Use a font size of 4 and a font face of Comic Sans MS: My name is _________ and I am a __________ at Thurston High School. This web page lists my favorite foods, favorite television shows, and favorite movies. Insert another blank line after the paragraph. Using a heading size of 2, left align the following heading: My Favorite Foods. Using an unordered list, include five of your favorite things to eat. Use a colored font, size of 4, with a font face of your choice Insert another blank line after the list. Using a heading size of 2, left align the following heading: My Favorite TV Shows. Bold the heading. Using an ordered list, list your top five favorite television shows. Use the same font settings as the unordered list. Insert another blank line after the list. Using a heading size of 2 again. Left align the following heading: My Favorite Movies. Using a definition list, list your five favorite movies and include a description of why you liked the movie. Underline the name of each movie. Use the same font settings as the other two lists. Include three images on your page: an image representing each of your favorite things. Resize the images so that they fit appropriately on the page and are displayed in one row at the bottom of your web page.

You might also like