Beginning HTML: Introduction to Web Publishing

About This Presentation

Title:

Beginning HTML: Introduction to Web Publishing

Description:

This image, cowgirl.gif, is in the same folder as this HTML file. The image tag reads img src='cowgirl.gif' Absolute and Relative Paths ... – PowerPoint PPT presentation

Number of Views:83

Avg rating:3.0/5.0

Slides: 59

Provided by: jcha60

Category:

more less

Transcript and Presenter's Notes

Title: Beginning HTML: Introduction to Web Publishing

1
Beginning HTMLIntroduction to Web Publishing
Dates for this Class Instructors Name
1 Name 2 Conference Call Number Phone No.
Presented by
2
Hyper Text Markup Language

What is HTML?
HyperText refers to text that can link to other
documents
Tag based formatting language Example
Welcome to My World!Appears as
Welcome to My World!

Why use it?
Easy to learn
Can be written in plain text file and saved
with .html
Overseen by W3C (World Wide Web Consortium)
Describes the document logically rather than
physically, so documents are reformatted to
fit monitor sizes.

3
Class Files

If you have not previously done so, please do so
now
On the left hand menu choose Student Resources
From the submenu, choose Download Class Files
Under the Web Fundamentals Group, choose
Beginning HTML Introduction to Web Publishing
Run this file or save it to a disk?
Choose Save to a Disk and make sure your DESKTOP
is selected
When the files have finished downloading you will
have a zip file located on your desktop (it will
say web101 or web101.exe)
Double click on that icon this will start the
unzipping process and ask you where to unzip the
folder to Make sure you choose your DESKTOP
again, then choose UNZIP.
When it has finished unzipping the file, close
that window.
You should now see a folder on your desktop
called Beginning HTMLThis folder contains the
files to be used for this class.

4
Basic Structure of an HTML Document
Basic Structure of an HTML Document
Two sections - Portion of document that
contains information not seen on the
screen - Portion of document that
contains all contents to be viewed on
the screen. May contain text, images,
tables, etc.
NOTE Most tags will have an opening tag and a
matching closing tag.
5
To Create Your First Webpage

Open up NOTEPAD on your computer
You may have to go to
Start 4 Programs 4 Accessories 4 Notepad
Type the following code into your Notepad
document.

6

My First Web Page. (This is displayed at the top
of the browser window.)

Type some text here (This content will be
displayed on the screen )

7
Saving and Viewing Your Web Page

To Save Your File In Notepad go to
File Save Choose your
Beginning HTML folder
Type a name for your file --
mypage.html NOTE Be sure to save the file with
.html at the end (so it will not be saved as a
text file).
To View Your File
Open your Beginning HTML folder
Find the page you just created and
double-click on it
(This will automatically bring it up in Internet
Explorer)
Congratulations! You have just created your first
web page!

4
4
4
4
8
Formatting Text Heading Tags

Largest Heading Size
Heading Size
Heading Size
Heading Size
Heading Size
Smallest Heading Size
--------------------------------------------------
---------
Any text entered between a pair or heading tags
is
Automatically bolded
It is sized according to the number in the tag,
with denoting the largest and denoting
the smallest.
A line break is automatically inserted before the
open heading tag and after the close heading
tag .

9
The ,
and comment tags.

- Break tag
The line break tag is
and has the same
effect as a carriage return, taking you to the
very next line.
- Paragraph tag
Since HTML does not recognize multiple carriage
returns, it is necessary to enter a paragraph tag
. This tag will insert the equivalent of two
break
tags.
Comment Tag

10
Tag Attributes

Bold
Italics
Underline
Strikethrough
Center Text
Text is displayed in a monospaced font
Tabs and any multiple spaces are displayed
Carriage returns may be used in place of or

tags

Indents the contents from both the
left and right margins.
11
Unordered List

- The items in a list are automatically indented
  from the left margin and separated by a line
  break.
- Each item in a list must be preceded by the
- tag.
- A closing tag
- You must close your unordered list with a
tag.
--------------

Red
Green
Blue

Favorite Colors
Red
Green
Blue

Looks like
12
Ordered List

1. The items in a list are automatically indented
  from the left margin and separated by a line
  break.
2. Each item in a list must be preceded by the
3. tag.
4. A closing tag
5. You must close your unordered list with a
tag.
--------------

Red
Green
Blue

Favorite Colors
Red
Green
Blue

To insert an ordered list (

Sample Code
- Red
- 2. Pink
  4. Scarlet
- Green
- Blue

Favorite Colors
Red 1. Pink 2. Scarlet
Green
Blue

Default is two pixels thick, 100 wide and
centered.
To change the size (or thickness) of a horizontal
rule (ten pixels thick).
To change the width using either or
pixels or
To change the alignment
To get a solid, gray rule, add the noshade
attribute to your tag.
You may put more than one attribute inside of the
tagnoshade

Please turn to Exercise 1 in your workbook
Read and follow the instructions carefully
Your finished exercise should looklike the
following

Education
The Great Chef School of America, 1995, New York,
New York.Baking and Pastry Arts544 West 23rd
Street, New York City
Employment
Café on the Lake, 1998-2000, West 67th Street,
New York, New York.Position Sous-Chef
Food management
Menu planning
Recipe development
Hors d'oeuvres and amuses bouches
Soups and tureens
Appetizers
Entrees
Desserts
Joes International Cafe, 1995-1998, 23West 5th
Street, New York, New York.Position
ChefManaging chef for the design and preparation
of
Moroccan cuisine
Northern Italian cuisine

To change the style of an Ordered List - insert
TYPE code in the
1. 1. B. Bananas
  2. C. Grapes
  3. 1. b. Bananas
    2. c. Grapes
    3. 1. II. Bananas
      2. III. Grapes
      3. displays i. Apples
        ii. Bananas
        iii. Grapes

To change the style of an Unordered List -
insert TYPE code in the
- - - - Blue
      - Green
      - Yellow
      - Blue
      - Green
      - Yellow
      - Blue
      - Green
      - Yellow
      20
      The ... tag and its attributes
      - The following attributes may be included inside a
        tag
      - sizeThe default is 3, and values can range
        from 1-7, 7 being the largest.
      - colorvalueThis value controls the color of
        the text within the tags.
      - face"font, alternate_font1, alternate_font2"Spec
        ifies the font to display the text. It is
        important to note that the specified font must be
        present on the user's machine in order to be
        displayed. It is for this reason that alternate
        fonts should be specified.
      - NOTE You may include all attributes in one
        tag
      - Examplecolorred" Welcome to the world wide web!
        displays Welcome to the world wide
        web!
      21
      Exercise 2
      - Please turn to Exercise 2 in your workbook
      - Read and follow the instructions carefully
      - Your finished exercise should looklike the
        following
    22
    Betty Beaches Chef Extraordinaire Betty_at_beaches.co
    m
  Renowned international chef with broad experience
  in American and International Cuisines seeking to
  found and develop the kitchen in a new
  international restaurant in a major city in the
  United States.

Education
The Great Chef School of America, 1995, New York,
New York.Baking and Pastry Arts544 West 23rd
Street, New York City
Employment
Café on the Lake, 1998-2000, West 67th Street,
New York, New York.Position Sous-Chef
Food management
Menu planning
Recipe development
Hors d'oeuvres and amuses bouches
Soups and tureens
Appetizers
Entrees
Desserts
Joes International Cafe, 1995-1998, 23 West 5th
Street, New York, New York. Position
ChefManaging chef for the design and preparation
of

Absolute Paths Specify the file location
according to their absolute location in your file
system, starting at the top level
Relative Paths Specify the file location
relative to the current file

Using the height and width attributes to specify
the exact size of a graphic
tells the browser how much space the item will
take up on your webpage.
This allows the browser to save that space on the
page and continue downloading the rest of the
page thereby speeding up your download time.
Resizing a graphic
Shrinking a graphic using the height and width
attributes forces the browser toload the larger
graphic and resize it
Enlarging a graphic using the height and width
attributes causes distortion of graphic
Resizing of a graphic should be done in a
graphics program and the resized graphic should
be added to your page

The alt attribute of the tag gives a brief
description of the image and is used for three
purposes
In version 3.0 browsers (and later) the text
description will appear at the point on the page
where the image will appear.
If the user has image loading option turned off
in their browser, or is using a non-graphical
browser such as Lynx, the text description will
be displayed in place of the image.
Browsers that read web page content aloud, such
as those for the visually impaired, will use the
alt attribute to read a brief description of the
image.

To insert an image for the background of your
page, insert thebackgroundpicture.gif
attribute inside your body tag.
Tips for background images
The image will tile as many times as necessary
to fill the page, so choose an image that
repeats well.
Make sure the text on your page is not drowned
out.
Keep the images simple
Test your background images on a 256 color
monitor

Please turn to Exercise 3 in your workbook
Read and follow the instructions carefully
Your finished exercise should looklike the
following

External link links to a site on the webhrefhttp//www.southbeach.comSouth Beach
Local link links to a file in our directoryhrefaboutus.htmlAbout Us
Mailto link triggers an email window to the
addressInfo_at_sbea
ch.com

If you use an image as a link, a blue border 2
pixels wide will appear around the image. To
remove the border, use the following codesrcpicture.gif border0.
Be careful where you place the tags spaces,
punctuation marks,etc., will be blue and
underlined if they are inside the tags
Always include opening and closing quotes in the
href attribute
It is possible to link to other types of file
formats
Sound files Song
Video files Movie

Please turn to Exercise 4 in your workbook
Read and follow the instructions carefully
Your finished exercise should looklike the
following

Named Anchor link to another location on the
same page
Add the name tag at the
location on the page where you want the link to
take you
We do not wrap the tags around any text,
since it is going to a specific location on
the page
When creating the anchor tag around the text
that will take you to that location, insert a
sign and the name of the anchorhrefwheretogoWhere is your office?
The tells it to stay on the same page and look
for this name

To get to a named anchor link from another page
If you were on the home page (or any other page
in our site) and you wanted to get to the named
anchor wheretogo on the offices.html page, your
code would look like thiswheretogoour office

Please turn to Exercise 5 in your workbook
Read and follow the instructions carefully
Your finished exercise should looklike the
following

Colors can be specified by
Name IE 4 and Netscape Navigator 2.0 and later
support 140 reserved color names (IE 2.1
and 3 only support 16 of these names)
By hexadecimal RGB triplets -- 006699
Specifies how much Red, Green, and Blue they
contain
Levels from 0 255, but expressed as a
two-digit hexadecimal number (base 16) ,
values range from 00 99
This method is preferred since it is supported
by more browsers
Base 10 colors can be converted to hexadecimal
numbers by using a calculator

To change the color of a specific piece of text,
you can add a color attribute to your
tag
Check this
out! or
Check this
out!
Would appear on the screen like this Check
this out!
This will override whatever color attribute was
specified in the tag.