Html introduction
This presentation is the property of its rightful owner.
Sponsored Links
1 / 31

HTML Introduction PowerPoint PPT Presentation


  • 85 Views
  • Uploaded on
  • Presentation posted in: General

HTML Introduction. Creating a Web Page. HTML: The Language of the Web. Web pages are text files, written in a language called Hypertext Markup Language or HTML . A markup language is a language used to describe the contact and format of documents.

Download Presentation

HTML Introduction

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html introduction

HTML Introduction

Creating a Web Page


Html the language of the web

HTML: The Language of the Web

  • Web pages are text files, written in a language called Hypertext Markup Language or HTML.

  • A markup language is a language used to describe the contact and format of documents.

  • HTML was developed from the Standard Generalized Markup Language (SGML), a language used for large-scale documents.

  • SGML proved to be cumbersome and difficult, thus HTML was created.


Tools for creating html documents

Tools for Creating HTML Documents

  • HTML documents are text files, which a text editor such as Windows NotePad can be used to create.

  • You can also use an HTML converter or an HTML editor.

    • an HTML converter like Microsoft Word takes text in one format and converts it to HTML code

    • an HTML editor helps you create an HTML file by inserting HTML codes for you as you work


Creating an html document

heading 1

It’s always a good idea to plan the appearance of your Web page before you start writing code.

image

horizontal line

paragraph

list

heading 3

bold and italic text

Creating an HTML Document


Html syntax

HTML Syntax

  • Document content is what the users sees on the page, such as headings and images.

  • Tags are the HTML codes that control the appearance of the document content.

    • tag is the name of the HTML tag

    • attributes are properties of the tag

    • document content is actual content that appears in the Web page


Html tags

HTML Tags

  • Tags can be one-sided or two-sided.

    • two-sided tags contain an opening tag <b> that tells the browser to turn on a feature and apply it to the contact that follows, and a closing tag </b> that turns off the feature

    • one-sided tags are used to insert noncharacter data into the Web page, such as a graphic image or video clip <tag attribute>

  • Tags are not case sensitive. The current standard is to display all tags in lowercase letters.


Html tag format

HTML Tag Format

  • 1. Tagscan always be identified by the Brackets < > that enclose the tag name

  • 2. Opening Tag< >tells the browser to turn on the feature

    • Tag Name – macro-like feature

    • Properties – additional information placed within brackets that control how the tag is used

  • 3. Closing Tag</ >tells the browser to turn off the feature

<Tag Name Properties> Document Content </Tag Name>

Example: <h1>Mr. Dube’s Chemistry Classes</h1>


Initial html tags

Initial HTML Tags

<html>

<head>

<title> Web Page Name </title>

</head>

<body>

Document Content

</body>

</html>


Saving and displaying web page

Saving and Displaying Web Page

  • Start Notepad

  • Create Initial Tags

    • After the <body> tag add:

      • Your Name

      • Your Major

      • “This is my first web page that I’ve created using HTML and Notepad. After I create this page, I’ll save it as an example of HTML coding.”

  • Save-As First_Program.htm(typically you will save in your wwwpub folder)

  • Close file and exit Notepad

  • Open the Internet Explorer file


Making changes to web pages

Making Changes to Web Pages

  • Open your Internet Explorer file (First_Program.htm)

  • Select View

  • Select Source (opens Notepad)

  • Make the desired changes in Notepad

  • Save HTML changes in Notepad

  • View the changes by selecting Refresh on the Internet Explorer screen

  • Close Notepad and Internet Explorer

Note: Always save Notepad DO NOT save the Internet Explorer pages


Creating heading tags

Creating Heading Tags

  • HTML supports six levels of headings, numbered <h1> through <h6>, with <h1> being the largest and most prominent.

  • Headings are always displayed in a bold font.


Entering heading tags and text

heading tags

As of HTML 3.2, the heading tag can contain additional attributes, one of which is the alignment attribute.

Entering Heading Tags and Text


Headings as they appear in the browser

<h1>

<h2>

<h3>

Headings As They Appear in the Browser


Header examples

Header Examples


Paragraphs

<html><head><title> Mr. Dube’s Chemistry Class </title></head><body><h1 align=“center”>Mr. Dube’s Chemistry Classes</h1><h2 align=“center”>at Robert Service High School</h2><p>Welcome to Mr. Dube’s Web Site. I hope you will use this site to learn more about your class, my expectations, and chemistry in the world around you.</p><h2 Chemistry Classes</h2> <h2>Class Policies</h2><h3>Grading</h3><h3>Appointments</h3><h3>Safety</h3> </body></html>

Paragraphs

If you are using a test editor like NotePad, the text might not wrap to the next line automatically.

Selecting the Word Wrap command within NotePad will allow you to see all the text on your screen.


Paragraph text in the browser

Paragraph Text in the Browser


Creating lists

Creating Lists

  • HTML supports three kinds of lists:

    • an ordered list, which is used to display information in a numeric order

    • an unordered list, which list items are not listed in a particular order i.e. bullets

    • a definition list, which is a list of terms, each followed by a definition line that is typically indented slightly to the right


Creating lists1

  • HTML supports three kinds of lists:

  • Ordered:Unordered:

  • Definition:

Creating Lists


Ordered list

Ordered List

ORDERED LIST:<olOption>…</ol>

COMPACT

START=Value

TYPE=(A | a | I | i| 1)

LIST ITEM:<liOption> - used in Ordered List and Unordered List

TYPE=(A | a | I | i| 1)

  • <h3>Banana Nut Bread:</h3>

  • <ol>

    • <li>Cream together butter and sugar

    • <li>Sift flour, baking soda and salt

    • <li>Add nuts and mashed bananas

  • </ol>


Unordered list

Unordered List

  • UNORDERED LIST:<ulOption>…</ul>

  • COMPACT

  • TYPE=(CIRCLE | DISC | SQUARE)

    • <h3>Pasta Perfection:</h3>

    • <ul>

      • <li>Cannelloni

      • <li>Lasagna

      • <li>Linguine

      • <li>Manicotti

    • </ul>


Definition list

Definition List

DEFINITION LIST:<dl>…</dl> - list of terms

COMPACT

a.     DEFINITION TERM <dt>

b.     TERM DEFINITION <dd>

<dl>

<dt>HTML

<dd>Hypertext Markup Language

</dl>


Applying character tags

Italic <i> </i>

and bold

<b> </b>

character tags

If you support users with older browsers, you should use a logical tag. Otherwise, use physical tags, which are more common and easier to interpret.

Applying Character Tags


The effect of the character tags in the browser

text formatted with bold and italic

The Effect of the Character Tags in the Browser


Physical character tags

Physical Character Tags


Special characters and codes

Special Characters and Codes


Inserting horizontal lines

Inserting Horizontal Lines

  • A horizontal line can improve the appearance of a Web page.

  • The syntax for creating a horizontal line is:

    <hr align=“align” size=“size” width=“width” color=“color” noshade>

    • align specifies the horizontal alignment of the line on the page (center, left, or right)

    • size specifies the height of the line in pixels or percentage of the screen width

    • width indicates the width of the line in pixels or percentage of the screen width

    • color indicates the color of the line

    • noshade specifies that the browser display a solid line


Different line styles

Different Line Styles

<hr align=“center” size=“12” width=“100%”>

size=12

width-100%

<hr align=“center” size=“6” width=“50%”>

size=6

width-50%

<hr align=“center” size=“3” width=“25%”>

size=3

width-25%

<hr align=“center” size=“1” width=“10%”>

size=1

width-10%

You can use line styles to improve the appearance of your Web page.


Inserting a graphic

Image file

dube.jpg

use the <p> tag so you can center the image

Inserting a Graphic


The image file as it appears in the browser

The Image File as it Appears in the Browser


Patrick s resume

  • Birthday is 12-22-96

  • Summary

  • I like to play with my brother Matthew and work on our computer. I played soccer for the last two years, and I'm looking forward to playing again this year. This summer, Matthew and I went to Florida on an airplane. In Florida we went to Disneyworld and I went on lot's of rides.

  • Activities

    • Watching the Stars play hockey

    • Building Lego towers

    • Teaching Matthew all the 'good' things

    • Going to Granddad's to feed the horse

  • Skills

    • Soccer

    • My alphabet

    • Printing my name

    • Computer learning games

Patrick’s Resume


Patrick s resume html

<HTML>

<HEAD>

<TITLE>Patrick's Resume</TITLE>

</HEAD>

<BODY>

<H1 ALIGN=CENTER>Patrick's Resume</H1>

<P ALIGN=CENTER><IMG SRC="Patrick.jpg" WIDTH="125" HEIGHT="150"></P>

<H3 ALIGN=CENTER>Birthday is 12-22-96</H3>

<H2 ALIGN=CENTER>Summary</H2>

I like to play with my brother Matthew and work on our computer. I played soccer for the last two years, and I'm looking forward

to playing again this year. This summer, Matthew and I went to Florida on an airplane. In Florida we went to Disneyworld and I went on lot's of rides.

<H3>Activities</H3>

<OL>

<LI>Watching the Stars play hockey

<LI>Building Lego towers

<LI>Teaching Matthew all the 'good' things

<LI>Going to Granddad's to feed the horse

</OL>

<H3>Skills</H3>

<UL>

<LI>Soccer

<LI>My alphabet

<LI>Printing my name

<LI>Computer learning games

</UL>

</BODY>

</HTML>

Patrick’s Resume HTML


  • Login