Intro To Html

  • Uploaded by: AImhee Martinez
  • 0
  • 0
  • April 2020
  • PDF

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA


Overview

Download & View Intro To Html as PDF for free.

More details

  • Words: 1,880
  • Pages: 33
HTML in Web Design Prepared by: Aimhee Martinez- Santos

What is HTML? • HTML is a language for describing web pages. • HTML stands for Hyper Text Markup Language • HTML is not a programming language, it is a markup language • A markup language is a set of markup tags • HTML uses markup tags to describe web pages

HTML Tags • HTML markup tags are usually called HTML tags • HTML tags are keywords surrounded by angle brackets like • HTML tags normally come in pairs like and • The first tag in a pair is the start tag, the second tag is the end tag • Start and end tags are also called opening tags and closing tags.

HTML Documents • HTML Documents = Web Pages • HTML documents describe web pages • HTML documents contain HTML tags and plain text • HTML documents are also called web pages

Example Simple HTML



My First Heading





My first paragraph









Example Explained The text between and describes the web page The text between and is the visible page content The text between

and

is displayed as a heading The text between

and

is displayed as a paragraph

Document Structure Tags Opening Tag

Closing Tag

Attribute

Description





 

Identifies document as  HTML





 

Document Head contains  Title Tag

<TITLE>



 

Title of Document





 

Contents of Document

Formatting Tags- BASIC Opening Tag

Closing Tag





to



Attribute

Description Contents of Document

BGCOLOR="#color code"

Background Color

BACKGROUND="... .gif "

Background Image

TEXT="#color code"

Text Color



Centers Text and Images

to

Heading

ALIGN="Left, Center, Right"

Align Text

Formatting Tags Opening Tag

Closing Tag

New Paragraph

ALIGN="Left, Center, Right"




Description

specify the overall font for your page : place tag at the beginning of the section.





Attribute

Align Text

Line Break

Formatting Tags Opening Tag

Closing Tag

Attribute

Description Horizontal Rule


ALIGN="Left, Center, Right"

SIZE = "number"

Align Text- 3 choices

Thickness of Horizontal Rule

WIDTH = "number %"

% of Document to Span

NOSHADE

Removes Shading

FONT tags Opening Tag

Closing Tag





Attribute

Section of Text

COLOR="#color code"

SIZE="number"











Description

Font Color

Font Size

Bold Text  

Underline Text

Italic Text

FONT tags Opening Tag

<STRIKE>

Closing Tag

Attribute



Description

Strikeout



 

<SUB>



 

Superscript Text SUB

<SUP>



 

Subscript Text SUP



Separates Text 

HTML Headings •  Headings are defined with the 

 to 

  tags.  

 defines the largest heading.   

 defines the smallest heading •Use HTML headings for headings only. Don't use  headings to make text BIG or bold. •Search engines use your headings to index the  structure and content of your web pages.

HTML Styles The purpose of the style attribute is: To provide a common way to style all HTML elements. Styles was introduced with HTML 4, as the new and  preferred way to style HTML elements. With HTML styles,  styles can be added to HTML elements directly by using the  style attribute, or indirectly by in separate style sheets (CSS  files). You can learn using styles with CSS  Examples:  1. style="background-color:yellow" 2. style="font-size:10px" 3. style="font-family:Times" 4. style="text-align:center"

Definition LISTS Optional list header(LH), followed by one or  more terms(DT) and definitions(DD).  A definition list is a list of terms and corres-  ponding definitions.  Definition lists are typically formatted with the  term on the left with the definition following on  the right or on the next line.  The definition text is typically indented with  respect to the term. 

Definition LISTS The opening list tag must be 
. It is followed  by an optional list header (caption)  and then by term names (
) and definitions  (
).  For example: 
 My Favorites 
Song
This is My LIFE!!!
 I love this one… 
Author
Carole Mortimer  

WOW!!! 



LISTS List tags define lists of elements that may  be displayed as bulleted or numbered  lists, glossary entries with definitions,  and menu formats. All of these layouts  are useful when organizing lists of items  or elements to improve their readability.

Unordered LISTS An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the
    tag. Each list item starts with the
  • tag.                

    An Unordered List:

    • Coffee
    • Tea
    • Milk


    Ordered LISTS Ordered Lists An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the
      tag. Each list item starts with the
    1. tag.
      1. Coffee
      2. Milk


      Types of Ordered LISTS

      Numbered list:

      1. Apples
      2. Bananas
      3. Lemons
      4. Oranges

      Letters list:

      1. Apples
      2. Bananas
      3. Lemons
      4. Oranges

      Lowercase letters list:

      1. Apples
      2. Bananas
      3. Lemons
      4. Oranges


      Roman numbers list:

      1. Apples
      2. Bananas
      3. Lemons
      4. Oranges

      Lowercase Roman numbers list:

      1. Apples
      2. Bananas
      3. Lemons
      4. Oranges


      Types of Unordered LISTS

      Disc bullets list:

       
    2. Apples
    3.  
    4. Bananas
    5.  
    6. Lemons
    7.  
    8. Oranges
    

Circle bullets list:

 
  • Apples
  •  
  • Bananas
  •  
  • Lemons
  •  
  • Oranges
  •       

    Square bullets  list:

     
  • Apples
  •  
  • Bananas
  •  
  • Lemons
  •  
  • Oranges


  • The Graphics Images The Image Tag and the SRC Attribute In HTML, images are defined with the tag. The tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image:

    The URL points to the location where

    the image is stored. The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

    Attributes of Images

    An image in the text

    An image



    align="top" width="100" height="50">



    in the text

    An image



    in the text



    Using Hyperlinks  Link Tags: ... Links on web pages are created using the anchor tag. These links can point to a different document on the Internet or to some anchor on the same page. Documents linked in this manner need not be HTML (or PHP/ASP) files. You can place a link to any kind of file, like in PPT or DOC files. • Style Tip Use hyperlinks liberally throughout your HTML pages to create links to related resources and to information on your own site as well as other sites.

    Links in Files HTML documents contain certain 'hot spots'. These hot spots provide the links to other documents/files on the Internet.

    Lets look at this tag in detail.
    Takes you to Webdevelopersnotes.com's main page is displayed as This will take you to Webdevelopersnotes.com's main page.  Anchor tags have a starting () and an () ending

    tag.  The HREF attribute is required and takes the URL address of the destination page as value. Without this attribute-value, no links will be created.  Some text is enclosed between the anchor tags. This text serves as the hot spot. When a visitor clicks on this 'hot spot', he or she will be transported to the target page.

    The Anchor Tag and Hyperlinks

    Hyperlinks are the colored, underlined words you find on a web  document. Clicking on these words will send you to a predefined  location on the same document, to another page on the same server  or to a location on another server. 

    Hyperlinks are created using the anchor tag. Highlighted Text Commands for this tag can be:  • href - Signifies a hyperlink.  • name -Signifies a specified location on page.  • The anchor tag requires a closing tag- 

    Links in Files Linking in the same document

    We employ the tag in this case too, but its format changes slightly. Instead of a URL in the HREF attribute, we use names. First, an anchor is set at the desired place in the document using the NAME attribute. In this case :

    The value of NAME attribute can be anything you want use. Also note, that it is not necessary to enclose any text or other HTML element if the anchor tag is used in this manner. 8.After setting an anchor with its NAME attribute you employ another set of to make a link that points to it:

    Click here to go to the top. •On clicking this link, you will be taken to the top of the page where you have put the anchor. •The HREF attribute takes the value of the NAME attribute mentioned before as its value; the name is prefixed with a # symbol.

    Links in Files a href

    Remo vin g the Un der lin e

    Destination

    The code:

    Text links are defined with the  hyperlink reference anchor.  It looks like this in your code:

    Lo cat ion on Sam e Si te To link to another page on the same site the code would be: Another Page To l ink t o an ot her site: Note: http:// is required. 
    Color Values • HTML colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). • The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). • Hex values are written as 3 double digit numbers, starting with a # sign.

    Color Values Color        

    Color HEX #000000 #FF0000 #00FF00 #0000FF

    Color RGB rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255)

     

    #FFFF00

    rgb(255,255,0)

     

    #00FFFF

    rgb(0,255,255)

     

    #FF00FF

    rgb(255,0,255)

     

    #C0C0C0

    rgb(192,192,192)

     

    #FFFFFF

    rgb(255,255,255)

    Uses of Color Values • The COLOR Values can be used with: 2. 3. 4.In table cells,

    Related Documents

    Intro To Html
    April 2020 17
    Introduction To Html
    November 2019 22
    Introduction To Html
    December 2019 20
    Html
    November 2019 38
    Html
    June 2020 22

    More Documents from ""