Learning HTML

1
Learning HTML

• Day 1

2
The Internet (http//)

• DNS
• Domain -gt IP
• Web servers
• Sites are located on servers, ex.
  www.coaps.fsu.edu is a domain, and when someone
  looks for a page, they talk to the web server

3
Visually
http
html
4
HTML

• The language that browsers understand and servers
  speak
• The look of web pages is governed by special
  tags, ex. lthtmlgt. All tags are enclosed in lt gt
• To be complaint with current standards, all tags
  must be lowercase

5
HTML Example

• lthtmlgt
• ltheadgt
• lttitlegtExample page!lt/titlegt
• lt/headgt
• ltbodygt
• Hi.
• lt/bodygt
• lt/htmlgt

6
The lthtmlgt tag

• lthtmlgt
• ltheadgt
• lttitlegtExample page!lt/titlegt
• lt/headgt
• ltbodygt
• Hi.
• lt/bodygt
• lt/htmlgt
• The lthtmlgt tag is the container for the entire
  web page

7
ltbodygt

• lthtmlgt
• ltheadgt
• lttitlegtExample page!lt/titlegt
• lt/headgt
• ltbodygt
• Hi.
• lt/bodygt
• lt/htmlgt
• The ltbodygt tag contains all the visual aspects of
  the page additional tags and content

8
ltheadgt

• lthtmlgt
• ltheadgt
• lttitlegtExample page!lt/titlegt
• lt/headgt
• ltbodygt
• Hi.
• lt/bodygt
• lt/htmlgt
• The ltheadgt tag contains metadata, information
  about the web page the title, the author, the
  language that the document is in

9
More about tags

• lthtmlgt
• ltheadgt
• lttitlegtExample page!lt/titlegt
• lt/headgt
• ltbodygt
• Hi.
• lt/bodygt
• lt/htmlgt
• All tags must be closed

10
Additional Tags

• ltagt lt/agt - a link
• ltbgt lt/bgt - bold
• ltugt lt/ugt - underline
• ltigt lt/igt - italics
• ltimg /gt - images

11
Attributes

• ltimg /gt
• src
• alt
• height
• width
• http//w3schools.com/tags/tag_img.asp
• ltimg srcimages/star.gif altStar Picture
  height100 width200 /gt

12
Attributes

• ltagt link title lt/agt
• href
• http//w3schools.com/tags/tag_img.asp
• lta hrefhttp//www.coaps.fsu.edugtCOAPSlt/agt

13
Basic HTML Review

• Everything is enclosed in lthtmlgt tags.
• The metadata of the page is enclosed in ltheadgt
  tags.
• The content of the page is enclosed in ltbodygt
  tags.

Lets build a page!