HTML: Hyptertext Markup Language

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:
 Tags
 Attributes
 Content
 Everything is wrapped in a tag
 <p align=“center”>Paragraph</p>
 Tags tell the browser how to display content
HTML - Tags
Closing Tag
<p align=“center”> Paragraph</p>
Opening Tag
Attribute (optional)
Content
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.
Creating and Viewing HTML
1. Create a file and add HTML tags and
information text
Use Notebook or WordPad
or 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>
html tag (opening and closing)
<head>
head tag (opening and closing)
</head>
<body>
body tag (opening and closing)
</body>
</html>
Header Section
 Identifying 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
 Used to add a title to your browser’s Title bar.
<html>
<head>
<title> myTitle </title>
</head>
</html>
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
 Tag to identify cascading style sheet (CSS) rules
 These determine how style rules apply to HTML
tags
<style>
body {backgound: blue;
color: red;
}
</style>
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 file
Demonstration
Link to help for MACs
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 text
 Text 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 Characters
 Not 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 tag containers:
<ul> .. </ul>
 List elements
<li> .. </li>
 Example:
<ul>
<li> first element in list </li>
<li> second element in list </li>
</ul>
List (ul) created:
• first element in list
• second element in list
Lists: Ordered List
 List tag containers:
<ol> .. </ol>
 List elements
<li> .. </li>
 Example:
<ol>
<li> first element in list </li>
<li> second element in list </li>
</ol>
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 term
Definition of term
Second Term
Definition of second term
Tables
4 elements of the
table:
1. Table itself
2. Row
3. Table headings
4. Column
 HTML
<table> . </table>
<tr> … </tr>
<th> … </th>
<td> … </td>
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
Data 1
Column 2
Column 3
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/csci10
1 “>
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”>

Download Report