Internet Mini HTML

1
Internet Mini - HTML

• Objectives
• Introduction to the Internet
• HTML how to develop a basic web page
• Develop your own web site using Microsoft
  FrontPage
• and more..

2
The Internet, the web, HTML

• Internet A network of computer networks which
  operates world-wide using a common set of
  communications protocols.
• Web a collection of interconnected documents,
  linked by hyperlinks and URLs. The Web is
  accessible via the Internet (also called the
  World Wide Web or WWW).
• Web site a set of interconnected web pages
  managed by a web server.

3
The Internet, the web, HTML

• Web page a resource of information, a document,
  usually in HTML or XHTML format that can be
  accessed through a web browser.
• HTML Hypertext Markup Language-the coded
  language used to write web pages. Tags and
  Attributes determine the layout of your web page.
• Webmaster the person that develops and maintains
  web pages

4
The Internet, the Web, HTML

• Editor software tool used to enter HTML code.
  We will use Notepad and Microsoft FrontPage
• Browser a software program on your computer used
  to request view Web documents (i.e. Internet
  Explorer Netscape)
• Web server a computer responsible for accepting
  web requests from web browsers.

5
Web Development

• Text Editing
• Notepad is the application used in class to place
  tags and attributes in the source code
• Web Authoring
• FrontPage is used in the Mini
• Dreamweaver for the HTML Certification
• Viewing/Switching
• Browser versions
• Variation in code interpretation

6
Structure Tags

• Required Tags-provide browsers with information
  about document characteristics
• Only appear once
• Always opened and closed
• ltHTMLgt.lt/HTMLgt

7
Structure Tags

• lt!DOCTYPEgt tells browsers the HTML version
• Visit http//www.htmlhelp.com/tools/validator/doct
  ype.htm and review the document type definitions
• Copy the text for the loose document type
  definition
• starts with lt!DOCTYPE.ends with /loose.dtdgt
• lt!- - text--gt comments do not affect the view
• ltHTMLgt identifies the document as an HTML
  document(.htm) for the browser to interpret
• ltHEADgt contains the page title, scripts used,
  style definitions, and indexing info
• ltTITLEgt visible in browser title bar
• ltBODYgt all tags, attributes, and info that the
  browser will display

8
More on Tags

• HTML Tags are commands written between angle
  brackets (i.e. ltHTMLgt)
• Most tags have to have open close tags (i.e.
  ltBODYgt lt/BODYgt)
• Our page will consist of structure tags plus
  other unique design tags

9
More on tags

• Title all pages should have a title. The title
  will appear in the title bar of the window.
• ltTITLEgtMy First Pagelt/TITLEgt
• Appears between ltHEADgt lt/HEADgt
• Body what visitors will see
• (ltBODYgtWelcome to my pagelt/BODYgt)

10
HTML Attributes

• Attributes change the appearance or
  characteristics of the tag in the browser
• Body Contains the contents of the web page.
  Displays what visitors will see. You can change
  the background color of your page, or the color
  of links and text as they appear on the page
• ltBODY bgcolorblue textwhite linkredgt
• ltPgtWelcome to my pagelt/Pgt
• lt/BODYgt

11
Start your Own Web Page

• Open Notepad as your text editor
• Start, All Programs, Accessories, Notepad
• Select File
• Select Save as
• Change the Save in to H\Internet Mini
• Change the Save as Type to All Files
• Change File name to My First Web Page.htm
• Edit your document -type the code on the
  following slide in notepad

12
Source Code Appearance

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN "http//www.w3.org/TR/html4/loose
  .dtd"gt
• lt!-- Student Name and Class Period --gt
• ltHTMLgt
• ltHEADgt
• ltTITLEgtMy First Web Pagelt/TITLEgt lt/HEADgt
• ltBODYgt
• Hello, Welcome to My World!
• lt/BODYgt
• lt/HTMLgt

13
View My First Web Page

• Save the Document and exit Notepad
• File, Save or Ctrls
• Open My Computer
• Browse to H\Internet Mini
• Find the File named
• My First Web Page.htm and open it

14
Wahoooo! You did it!

• Your first page should look like
• Now we need to change some of the characteristics
  of the page

15
Editing Web Pages

• Right click anywhere on the webpage
• Select View Source.
• This should look familiar
• The notepad document opens
• Now begin editing the source code of your page
• Review the following tags and attributes and add
  them to your web page

16
Adding Design Tags

• Design tags type the following tags into your
  source code on the next line after the ltBODYgt tag
• Header is the header for the body text
• ltH1gt Hello, Welcome to My World!lt/H1gt
• 6 different levels (H1-H6) for outline style text
• Break in line spacing
• ltBRgt
• Horizontal Rules
• ltHRgt
• Save your source code (Ctrls) then switch to
  your browser window
• Refresh your browser window

17
Adding Design Tags

• Now your page should look like
• A horizontal rule is a simple way to separate
  items on your page

18
Changing Attributes

• Attributes change the characteristics of the
  design elements that the tags represent in the
  source code.
• Add the following attributes to the Horizontal
  Rule Tag
• ltHR size10 width100 colorbluegt
• Save your notepad document (Ctrls)
• Refresh your browser window

19
Changing Attributes

• Now your page should look like
• Using the attribute of color can attract
  attention to important topics on your web site

20
Adding Design Tags

• Design tags add the following tags into your
  existing source code to attract attention
• ltMARQUEEgtltH1gtHello, Welcome to My
  World!lt/H1gtlt/MARQUEEgt
• Save your source code (Ctrls) then switch to
  your browser window
• Refresh your browser window

21
Changing Attributes

• Attributes change the characteristics of the
  design elements that the tags represent in the
  source code.
• Add the following attributes to the Marquee Tag
• ltMARQUEE behavioralternate width100
  bgcolorgreengt
• Save your notepad document (Ctrls)
• Refresh your browser window

22
Formatting Tags

• Text formatting after your horizontal rule add a
  5 sentence paragraph about life in your world
• Paragraph ltPgt Your paragraphlt/Pgt
• Change the appearance of your text
• Bold ltBgt surround first line lt/Bgt
• Italic ltIgt surround second linelt/Igt
• Underline ltUgtsurround third linelt/Ugt
• Font Style ltFONT facearial colorpurplegt
  surround the remaining lineslt/FONTgt
• Save your document (Ctrls)
• Refresh your browser window

23
Changing Attributes

• Now your page should look like except that the
  heading is moving, and the paragraph is about you

24
Check your Source Code

• If your page did not turn out like the example,
  check the source code

25
More HTML Tags

• Whats next
• Links
• Lists (ordered lists unordered lists)
• Tables
• And more.

26
Images

• Other tags
• Images photographs, animation
• Save 3 images to H\Internet mini
• Use images previously saved
• Browse the Internet
• Insert the following tag in your source code
  between your final lt/Pgt and lt/BODYgt
• ltIMG SRCfilename.extgt
• Save your source code (Ctrls)
• Refresh your browser window

27
Images

• Now your page should look like
• Using Image tags allows you to create a photo
  gallery
• Add two more images

28
Troubleshooting Image Code

• If you see this three things could be wrong
• Syntax is incorrect
• Verify the written code
• All symbols included
• Filename is incorrect
• Filename in code must be identical to filename in
  H
• File location is incorrect
• Web pages and images must be in the same folder
  on H\Internet Mini

29
More HTML Tags

• Ordered/Numbered Lists insert the following tags
  into your source code between the image tag and
  the lt/BODYgt
• ltBRgt
• ltOLgt
• ltLIgtCavalierslt/LIgt
• ltLIgtLakerslt/LIgt
• ltLIgtKingslt/LIgt
• lt/OLgt
• Save your source code (Ctrls)
• Refresh your browser window

30
More HTML Tags

• Unordered/Bulleted Lists insert the following
  tags into your source code between the lt/OLgt and
  the lt/BODYgt tags
• ltBRgt
• ltULgt
• ltLIgt49erslt/LIgt
• ltLIgtRaiderslt/LIgt
• ltLIgtSaintslt/LIgt
• lt/ULgt
• Save your source code (Ctrls)
• Refresh your browser window

31
More HTML Tags

• Other tags insert the following tags into your
  source code between the lt/ULgt and the lt/BODYgt
• Tables for organizing statistics/data
• ltBRgt
• ltTABLEgt
• ltCAPTIONgt Todays Weatherlt/CAPTIONgt
• ltTRgt
• ltTHgtTemperaturelt/THgt
• ltTHgtLocationlt/THgt
• lt/TRgt
• ltTRgt
• ltTDgt86lt/TDgt
• ltTDgtElk Grovelt/TDgt
• lt/TRgt
• lt/TABLEgt
• Save your source code (Ctrls)
• Refresh your browser window

32
Table Attributes

• Attributes change the appearance or
  characteristics of the Tag. Add the following
  attributes to the table.
• ltTABLE border3 cellpadding15
  cellspacing5 bgcolor336699gt
• Save your source code (Ctrls)
• Refresh your browser window

33
Changing Colors

• There are two different ways to change the color
  attribute of an object or text
• Color Name
• Hexadecimal code
• Review the link below for an explanation
• Color Chart

34
More HTML Tags

• Use the Anchor tag to create a link to another
  Web page (file name with extension) within your
  site or to an external site (URL)
• ltA HREFURLgttextlt/Agt
• ltA HREFhttp//www.yahoo.comgtYahoolt/Agt
• Turn one of your images into a link
• ltA HREFURLgtltIMG srcimage.jpggtlt/Agt

35
Are you a Webmaster?
Probably not, but now that you have completed the
Intro to HTML Tutorial go on to complete
assignments 3,4,5. These are graphic
representations of how code should be structured.
Save the document to your H/Internet Mini
folder. Make sure that your Drawing Toolbar is
available then Click and Drag the puzzle pieces
in the correct locations on the right side of
each page.