HTML: Hyptertext Markup Language Doman’s Sections.

HTML: Hyptertext Markup Language

Doman’s Sections

Websites are simple

• Made of only two parts– Code– Graphics

What is HTML

• HTML describes the format of the information to be displayed… browser can then format the information when it receives the file.

• Marking up text to display to tell computer how to format and present the information, images.

• Enabling links to positions on the same page or to new pages.

HTML : Hypertext Markup Language

Made up of:TagsAttributesContent

Everything is wrapped in a tag<p align=“center”>Paragraph</p>

Tags tell the browser how to display content

HTML - Tags

<p align=“center”>

Opening Tag Attribute (optional) Content

Closing Tag

Paragraph

</p>

HTML TAGS• Tags identify the HTML control information.• Bracketed by < >• Format:

– Start tag ‘work’:• < tag_identifier attribute1;attribute2>• <tag_identifier style=“attr1; attr2”>

– End tagged content:• </tag_identifier>

– Start and End together tagged content:• <tag_identifier />

Format for the remainder of lecture

• The slides will give an outline and overview of the tags you will need to learn

• W3schools.org link will be used to demonstrate and practice the tags

• Local html file will also be used to demonstrate the tags.

http://www.w3schools.com/html/default.asp

Creating and Viewing HTML

1. Create a file and add HTML tags and information text

Use Notebook or WordPador better yet: Notepad++

2. Save the file (directions to follow)

Required HTML tags

Tag to indicate that the following text is written with html tags

<html>….. </html>

HTML Sections

Header section<head> </head>

Body Section<body> </body>

HTML - Pages

All html pages need only:

<html><head></head><body></body>

</html>

html tag (opening and closing)

head tag (opening and closing)

body tag (opening and closing)

Header SectionIdentifying data

Used to indicate any information about the screen itself

Not always displayed on the screen

Common header tags:<title> </title><meta> </meta><style> </style> <script> </script>

Header Section : title Tag

Header Section : meta Tag

• Used to describe any other relevant information about the page

• Uses attributes inside the tag • Three attributes that may help get your

page found by search engine: – keyword– description– author

EXAMPLE: <html><head><title> my Title </title>

<meta name=“author” contents=“Doman”/>

<meta name=“description” contents=“this is my first web page” />

<meta name=“keywords” contents=“html example first” />

</head></html>

Header Section : style Tag

This is to be covered in more depth next week

Header Section : script Tag

Tag that allows the use of Java (via JavaScript) and Visual Basic (via VBScript) programming in the HTML page.

<script> …. </script>

Not covered in this course See Lesson 14 of Sams Teach Yourself HTML text.

Creating and Viewing HTML

1. Create a file and add HTML tags and information text

Use Notebook or WordPad or Notepad++

2. Save the file

Use file extension: htm or html

3. Open the fileDemonstration

Link to help for MACs

http://faculty.winthrop.edu/domanm/csci101/

Body Section

• <body> … </body>• Surrounds any text to appear on the page

• All the formatting tags can be placed here.

• The rest of the HTML lectures concern the body section

Paragraphs

<p> texttexttexttexttext </p> Browser adds a blank line before the textText is wrapped at the end of the window

Forced break line

<br />This tag forces a break or blank line in the

formatted text.

Text Emphasis

• Italics<i> words to be italicized </i><em> words to be italicized </em>

• Bolden<b> words with bold format </b><strong> words with bold format <strong>

• Underlining<u> words underlined </u>

Text Emphasis

Size<big> big words </big><small> smaller words </smaller>Subscript and superscript<sub> subscript characters </sub><sup> superscript characters </sup>

Headings

• HTML provides 6 different heading tags• End of heading includes a blank line after text

<h1> … </h1><h2> … </h2><h3> … </h3>….<h6> … </h6>

Special CharactersNot all browsers correctly display symbols

HTML uses a code (entity character reference) to tell the browser how to interpret symbols

Ex: < &lt ; ± &plusmin;

Most frequently used characters listed in Appendix C in Sam’s teach yourself HTML text

Special Characters one to remember

stands for nonbreaking space

HTML ignores extra spaces

To include extra spaces in your text use &nbsp

Lists

• Types of lists

– Bulleted (unordered) lists

– Numbered/lettered lists

– Definition lists

Lists: Bulleted (Unordered)

List (ul) created:

• first element in list• second element in list

Lists: Ordered List

List (ol) created:

1.11. first element in list 2. second element in list

Lists: Definition List

Formats list like a set of terms and their definitions

Definition list tag <dl>… </dl>Term tags <dt> … </dt>Definition data tag

<dd> .. </dd>

Lists: Definition List

Example : <dl> <dt> First term </dt> <dd> Definition of term </dd>

<dt> Second term </dt> <dd> Definition of second term </dd> </dl>

List (dl) created:

FiFirst termDefinition of term

Second TermDefinition of second term

Tables

4 elements of the table:1.Table itself2.Row3.Table headings4.Column

<table> . </table><tr> … </tr><th> … </th> <td> … </td>

HTML is row oriented That is, rows surround the columns and table

headings

Tables: Creating tables<table><tr> <th> Column 1 </th> <th> Column 2 </th> <th> Column 3 </th> </tr><tr> <td> Data 1 </td> <td> Data 2 </td> <td> Data 3 </td></tr></table>

First create the row

Then create the headers

Create the second row Create the column data

TABLE created:

Column 1 Column 2 Column 3

Data 1 Data 2 Data 3

Linking Text and Documents

Before the browser on the displaying machine can link to another page, location, image,… anything…

the machine must know the address of the object.

Addresses are known by their URL

HTML Anchor Tag

<a attributes> hyperlink text or object </a>Enabling links to positions on the same page or to new pages.

Linking to another page

To link to our class page:

<a href=“http://faculty.winthrop.edu/domanm/csci101 “>Class web page </a>

href: “hyperlink reference”

Bookmarking positions in one HTML document

You can reference and link to a point in a specific spot in an HTML document.

Bookmarks are not seen by the user.

Use the name attribute of the <a> tag to bookmark your document.

<a name=“bookmark1”> Start of bookmark</a>

Anchor example

<html>….<a name=“bookmark”> Start of bookmark</a>….<p> To return to the bookmark <a href=“#bookmark”> click here </a> </p>….</html>

Images

Add images to webpage by using a single HTML tag, the image source tag

<img src=“location” />

Key is getting the location correct

Finding your images

<img src=“name.filetype” />

Save your images in the same folder as your html file.

Image Attributes - alt

Alternate attribute – This provides text for browsers that don’t have graphic capabilities.

It also provides the text shown when the input pointer hovers over the image.

<img src=“location” alt=“text to be shown” />

Image Attributes - size

Secure the size of the image displayed – height and width attributes

These can be specified in units of Percentage of the page real estate Actual pixels

<img src=“location” height=“60” width=“50” />

<img src=“location” height=“6%” width=“10%” />

Floating• Objects can be made to float left or right• The object will ‘float’ along side the existing

text or content• Floating is done through the style attribute• In any tag identifier, add the attribute

style=“float:right”

Floating examples

• To float an image:<img src=“xxx” style=“float:left” />

• To float a table:<table style=“float:right”>

HTML: Hyptertext Markup Language Doman’s Sections.

Documents

Transcript of HTML: Hyptertext Markup Language Doman’s Sections.