How Hyper Text Markup Language Works PowerPoint presentation | free to view - id: 56cf6b-MjFjZ

<html> <head> <title> Basic HTML PowerPoint </title> </head> <body> How Hyper Text Markup Language Works </body> </html> - PowerPoint PPT Presentation

1 / 24
About This Presentation
Title:

<html> <head> <title> Basic HTML PowerPoint </title> </head> <body> How Hyper Text Markup Language Works </body> </html>

Description:

Basic HTML PowerPoint How Hyper Text Markup Language Works Basics of HTML 2 ways to view a webpage Web ... – PowerPoint PPT presentation

Number of Views:644
Avg rating:3.0/5.0
Slides: 25
Provided by: Johnso151
Category:

less

Transcript and Presenter's Notes

Title: <html> <head> <title> Basic HTML PowerPoint </title> </head> <body> How Hyper Text Markup Language Works </body> </html>


1
lthtmlgtltheadgtlttitlegtBasic HTML
PowerPointlt/titlegtlt/headgtltbodygtHow Hyper Text
Markup Language Workslt/bodygtlt/htmlgt
2
Basics of HTML
  • 2 ways to view a webpage
  • Web view is how the browser interrupts your code
    (how you normally view web pages). The purpose
    of a web browser (like Internet Explorer,
    Firefox, Chrome, etc) is to read HTML documents
    and display them as web pages.
  • Source code view is the written text that is
    created by the web designer. The source code for
    any webpage can be viewed .
  • HTML tags are written between angle brackets (lt
    gt) and most tags will usually come in pairs like
    ltigt and lt/igt

3
Basics of HTML cont.
  • The first tag in a pair is called the opening tag
    (ltigt ) and the second is called the closing tag
    (lt/igt note the /)
  • The browser does not display the HTML tags, but
    uses the tags to interpret the content of the
    page.
  • Tags order matters! If you open the tags one way
    then it must reverse when closed.
  • Example ltbgtltigtHello Worldlt/igtlt/bgt
  • Tags are not case sensitive

4
Basics of HTML cont.
  • All HTML documents start with ltHTMLgt and end with
    lt/HTMLgt
  • Every HTML webpage has 2 sections which are
    denoted by HTML tags
  • ltHeadgt
  • ltBodygt
  • The Head section will always open close before
    the Body section opens

5
Basics of HTML Head Section
  • Head section
  • This section always begins with ltheadgt and ends
    with lt/headgt
  • This section will not be visible in the body of
    the web browser
  • The name of the webpage that appears in the title
    bar is placed in this section
  • Example lttitlegtMy First Pagelt/titlegt
  • Others elements can be placed in this section but
    we will go over those in a later lesson

6
Basics of HTML Body Section
  • Body Section
  • Information displayed in this section will be
    displayed in the body of the web browser
  • The closing body tag will always proceed the
    closing HTML tag.

7
Basics of HTML Saving
  • How to save as HTML
  • File -gt Save As -gt (the name you want the file to
    be).html
  • When you save as .html this tells the computer
    that this file should be opened by a browser
  • If using a simple text editor, typing .html
    manually is required
  • Example
  • MyFirstPage.html
  • MyFirstPage.doc

- Will open as a webpage
- Will not open as a webpage
8
Basics of HTML REVIEW
  • lthtmlgt
  • ltheadgt
  • lttitlegt
  • Webpage title
  • lt/titlegt
  • lt/headgt
  • ltbodygt
  • My first webpage
  • lt/bodygt
  • lt/htmlgt

Starts every HTML page
Info in this section will not appear in the body
of the web browser
Info in this section will appear in the body of
the web browser
Ends every HTML page
9
lthtmlgtltheadgtlttitlegtStyling in HTML
PowerPointlt/titlegtlt/headgtltbodygtHow to style
in HTMLlt/bodygtlt/htmlgt
10
Styling in HTML
  • Styling tags can be added to HTML to place
    emphasis or add appeal
  • These tags must be closed
  • ltbgt bold
  • ltigt italics
  • ltugt underline
  • ltpgt starts and ends paragraphs creates 1 blank
    line
  • These tags do not have to be closed
  • ltbr /gt line break
  • lthr /gt horizontal rule creates a straight line
    across the page

11
Styling in HTML cont.
  • Heading tags must be closed
  • lth1gt Largest heading tag
  • lth2gt 2nd largest heading tag
  • lth3gt 3rd largest heading tag
  • lth4gt 4th largest heading tag
  • lth5gt 2nd smallest heading tag
  • lth6gt smallest heading tag

12
Styling in HTML REVIEW
  • Code View
  • ltbgtMy name islt/bgt
  • ltigtThe Great Gatsbylt/igt
  • ltugtSee Spot Runlt/ugt
  • ltpgtEarthlt/pgtltpgtMarslt/pgt
  • lthr /gt
  • Yellowltbr /gt Bird
  • lth1gtAbout uslt/h1gt
  • lth6gtWhat to do now?lt/h6gt
  • Browser View
  • My name isThe Great GatsbySee Spot Run
    Earth
  • Mars
  • YellowBird
  • About usWhat to do now?

13
lthtmlgtltheadgtlttitlegtLists in HTML
PowerPointlt/titlegtlt/headgtltbodygtHow to create
lists in HTMLlt/bodygtlt/htmlgt
14
Creating Lists in HTML
  • 3 types of lists
  • Unordered list
  • Bulleted items
  • Ordered list
  • Numbered items
  • Definition List
  • a list of items, with a description of each item

15
Unordered Lists in HTML
  • The tag for a bulleted list is ltulgt lt/ulgt
  • Each item is surrounded with the open and close
    ltligt tag (li list item)
  • Bullets can be changed to squares or circles with
    the optional code typesquare or typecircle
    in the ltulgt tag.
  • Code View
  • ltulgt
  • ltligtMilklt/ligt
  • ltligtEggslt/ligt
  • lt/ulgt
  • -- Browser View
  • Milk
  • Eggs

16
Ordered Lists in HTML
  • The tag for a numbered list is ltolgt lt/olgt
  • Each item is surrounded with the open and close
    ltligt tag (li list item)
  • List items will be numbered
  • Numbers can be changed to a, A, i, or I with the
    optional code typea, typeA, etc in the ltolgt
    tag.
  • Code View
  • ltolgt
  • ltligtGeorge Washingtonlt/ligt
  • ltligtJohn Adamslt/ligt
  • lt/olgt

-- Browser View 1. George Washington 2. Johns
Adam
17
Definition Lists in HTML
  • The tag for this list is ltdlgt lt/dlgt
  • Each term is surrounded with the ltdtgt tag and
    each description is surrounded with the ltddgt tag
  • Code View
  • ltdlgt
  • ltdtgtElectronlt/dtgt
  • ltddgt- carries a negative electric chargelt/ddgt
  • ltdtgtNeutronlt/dtgt
  • ltddgt- carries no electric chargelt/ddgt
  • lt/dlgt

-- Browser View Electron - carries a
negative electric charge Neutron - carries
no electric charge
18
Lists in HTML REVIEW
  • Ordered lists ltolgt produce numbered lists
  • Unordered lists ltulgt produce bulleted lists
  • Each item in an ordered list unordered list is
    surrounded with the ltligt tag
  • Definition lists ltdlgt produce terms with
    definitions
  • Each term in a definition list is surrounded with
    the ltdtgt tag and each description is surrounded
    with the ltddgt tag.

19
lthtmlgtltheadgtlttitlegtImages in HTML
PowerPointlt/titlegtlt/headgtltbodygtHow images are
used in HTMLlt/bodygtlt/htmlgt
20
Adding Images in HTML
  • Images are defined with the ltimggt tag
  • Image tags do not have closing tags
  • The src tag must be included src stands for
    source and this references the URL of the
    picture
  • The alt tag is optional but recommended alt
    stands for alternative text is used to provide
    short descriptive info for an image if the user
    can not view the image

21
Adding Images in HTML Cont.
  • Only 3 types of images are displayed by all
    browsers
  • .jpg
  • .gif
  • .png
  • The browser displays the image where you place
    the ltimggt tag.
  • Example If you put an image tag between two
    paragraphs, the browser shows the first
    paragraph, then the image, and then the second
    paragraph.

There are some very important differences
between these file types but we will discuss
those at a later date.
22
Adding Images in HTML Cont.
  • For images embedded with text, images can float
    with the text.
  • The align tag can be added to the img tag to make
    the image either align left or right
  • Images can be resized using HTML tags but it is
    good practice to keep the picture proportional
    (this is done to avoid stretching of pictures)
  • Height Width can be added to the tag to resize
    the image

23
Adding Images -REVIEW
  • Code View
  • ltimg srccar.gif altgreen racecar
    height95 width151 alignrightgt
  • Browser View

NOTE Alternative text is shown when the cursor
is placed over the object
24
Hyperlinking Images Text in HTML
  • Both text and images can be linked to other pages
    or images via the hyperlink tag
  • Example
  • lta hrefhttp//www.google.comgtimage or text
    that will be hyperlinked lt/agt
  • - a space must be between the a href
  • - the website that the image or text is leading
    to must be in quotes
  • - be sure to include lt/agt or everything past
    this tag will be hyperlinked
  • - web addresses should be written with http//
Write a Comment
User Comments (0)
About PowerShow.com
Home About Us Terms and Conditions Privacy Policy Presentation Removal Request Contact Us
Copyright 2024 CrystalGraphics, Inc. — All rights Reserved. PowerShow.com is a trademark of CrystalGraphics, Inc.
The PowerPoint PPT presentation: " Basic HTML PowerPoint How Hyper Text Markup Language Works " is the property of its rightful owner.
Do you have PowerPoint slides to share? If so, share your PPT presentation slides online with PowerShow.com. It's FREE!