Scribd Logo
Upload

Welcome to Scribd!

  • Htmlcomp 1

    Uploaded by

    Arianne Nicole Labitoria
    17 views50 pages
    html

    Original Title

    htmlcomp1

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    html

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    17 views50 pages

    Htmlcomp 1

    Uploaded by

    Arianne Nicole Labitoria
    html

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 50

    WEB DESIGN HTML BASICS

    Introduction

    What is HTML?
    HTML

    is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML uses markup tags to describe web pages HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag

    HTML Format
    <html> <head> <title> </head> <body>

    </title>

    </body> </html

    HTML Elements

    HTML documents are defined by HTML elements. An HTML element is everything from the start tag to the end tag:
    Start tag Element content This is a paragraph This is a link </p> </a> End tag

    <p> <a href="default.htm" > <br/>

    HTML Attributes

    HTML elements can have attributes Attributes provide additional information about the element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value For example, HTML links are defined with the <a> tag. The link address is provided as an attribute:
    <a

    href="http://www.w3schools.com">This is a link</a>

    Headings

    HTML <h1> to <h6> Tags


    The

    <h1> to <h6> tags are used to define HTML headings.<h1> defines the largest heading and <h6> defines the smallest heading. Example
    <h1>This

    is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>

    Horizontal line

    HTML <hr> Tag


    The

    <hr> tag creates a horizontal line in an HTML page.The hr element can be used to separate content in an HTML page.
    Value
    Left Center Right Pixels or % Pixels or %

    Attribute
    align

    Description
    Specifies the alignment of a hr element Specifies the height of a hr element Specifies the width of a hr element

    size width

    HTML Tag Lists

    HTML <hr> Tag


    Samples
    <hr

    align="left" /> <hr size="30" /> <hr width="50%" /> <hr align="left" width="50%" />

    Paragraphs

    HTML Paragraphs
    Paragraphs

    are defined with the <p> tag. The p element automatically creates some space before and after itself.
    Attribute align Value Left Center Right
    <p>This

    Description Specifies the alignment of a hr element

    is some text in a paragraph.</p>

    HTML Formatting Tags

    Text Formatting Tags


    Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text

    Tag <b> <big> <em> <i> <small> <strong> <sub>

    <sup>
    <ins> <del>

    Defines superscripted text


    Defines inserted text Defines deleted text

    HTML Styles

    The style attribute is a new HTML attribute. It introduces CSS to HTML. The purpose of the style attribute is:
    To

    provide a common way to style all HTML elements.

    HTML Style Examples style="background-color:yellow" style="font-size:10px" style="font-family:Times" style="text-align:center"

    Style Examples

    Background Color
    <body

    style="background-color:yellow">

    Font Family, Color and Size


    <p

    style="font-family:courier new; color:red; font-size:20px"> style="text-align:center">

    Text Alignment
    <h1

    HTML Lists

    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 <ul> tag. Each list item starts with the <li> tag. <ul> <li>Coffee</li> <li>Milk</li> </ul>

    HTML Lists

    Different Unordered Lists


    Disc

    bullets list <ul type="disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>

    HTML Lists

    Different Unordered Lists


    Circle

    bullets list <ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>

    HTML Lists

    Different Unordered Lists


    Square

    bullets list: <ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>

    HTML 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 <ol> tag. Each list item starts with the <li> tag.
    <ol> <li>Coffee</li> <li>Milk</li>

    </ol>

    HTML Lists

    Different Ordered Lists


    Numbered

    list:

    <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li>


    </ol>

    HTML Lists

    Different Ordered Lists


    Letters

    list: <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

    HTML Lists

    Different Ordered Lists


    Lowercase

    letters list <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

    HTML Lists

    Different Ordered Lists


    Roman

    numbers list: <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

    HTML Lists

    Different Ordered Lists


    Lowercase

    Roman numbers list: <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

    The image tag

    In HTML, images are defined with the <img> tag. The <img> 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: <img src="url" />

    The image tag


    Attribute
    align

    Value
    top bottom middle left right Pixels

    Description
    Specifies the alignment of an image according to surrounding elements

    border

    Specifies the width of the border around an image Specifies the height of an image

    height

    Pixels or %

    width

    Pixels or %

    Specifies the width of an image

    HTML Hyperlinks (Links)

    The HTML <a> tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

    HTML Hyperlinks (Links)

    The most important attribute of the <a> element is the href attribute, which indicates the links destination. By default, links will appear as follows in all browsers:
    An

    unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red

    HTML Link Syntax

    <a href="url">Link text</a> Example


    <a

    href="http://www.w3schools.com/">Visit W3Schools</a> Clicking on this hyperlink will send the user to W3Schools' homepage.

    Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.

    HTML Links - The target Attribute


    The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab:
    <a

    href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

    HTML Links - The id Attribute

    The id attribute can be used to create a bookmark inside an HTML document. Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.

    HTML Links - The id Attribute

    An anchor with an id inside an HTML document:


    <a

    id="tips">Useful Tips Section</a>

    Create a link to the "Useful Tips Section" inside the same document:
    <a

    href="#tips">Visit the Useful Tips Section</a>

    Or, create a link to the "Useful Tips Section" from another page:
    <a

    href="http://www.w3schools.com/html_links.htm#ti ps">

    Tables

    Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

    Sample Code

    <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

    Attributes
    Attribute Value Description

    align

    left center right


    Pixels

    Specifies the alignment of a table according to surrounding text


    Specifies the background color for a table

    bgcolor

    border

    Pixels

    Specifies the width of the borders around a table


    Specifies the space between the cell wall and the cell content

    cellpadding

    Pixels

    cellspacing
    width

    Pixels
    Pixels %

    Specifies the space between cells


    Specifies the width of a table

    Tables and the Border Attribute

    If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.
    <table

    border=5> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>

    Headings in a Table

    Headings in a table are defined with the <th> tag.

    <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

    Empty Cells in a Table

    Table cells with no content are not displayed very well in most browsers. Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border). To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible:

    Cells that spans more than one column


    <h4>Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>

    Cells that spans more than one row


    <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>

    Frames

    The <frame> tag defines one particular window (frame) within a <frameset>. Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize, etc.

    Attributes
    Attribute frameborder Value 0 1 Description Specifies whether or not to display a border around a frame

    longdesc
    marginheight marginwidth name noresize scrolling

    URL
    pixels pixels name noresize yes no auto URL

    Specifies a page that contains a long description of the content of a frame


    Specifies the top and bottom margins of a frame Specifies the left and right margins of a frame Specifies the name of a frame Specifies that a frame is not resizable Specifies whether or not to display scrollbars in a frame Specifies the URL of the document to show in a frame

    src

    Frameset

    The <frameset> tag defines a frameset. The <frameset> element holds one or more <frame> elements. Each <frame> element can hold a separate document. The <frameset> element specifies HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them. Not supported in HTML 5

    Attribute
    Attribute Value cols pixels % * Description Specifies the number and size of columns in a frameset

    rows

    pixels % *

    Specifies the number and size of rows in a frameset

    Using Frames

    Example <frameset rows="25%,*,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset>

    Using frames within a frameset

    <frameset rows="50%,50%"> <frame src="frame_a.htm"> <frameset cols="25%,75%"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </frameset>

    Using frameset without resizing

    <frameset cols="50%,*,25%"> <frame src="frame_a.htm" noresize="noresize"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset>

    Navigation Frame

    This example demonstrates how to make a navigation frame. A navigation framecontains a list of links with the second frame as the target. The second frame willshow the linked document.

    Sample navigation using frames


    Main Page <html> <frameset cols="120,*"> <frame src="tryhtml_contents.htm"> <frame src="frame_a.htm" name="showframe"> </frameset> </html> Link frame <a href ="frame_a.htm" target ="showframe">Frame a</a><br> <a href ="frame_b.htm" target ="showframe">Frame b</a><br> <a href ="frame_c.htm" target ="showframe">Frame c</a>

    iframe

    The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. Supported by HTML5

    Attributes
    Attribute align frameborder height longdesc marginheight Value Left, right, top middle, bottom 1 0 Pixels URL Pixels Description Specifies the alignment of an <iframe> according to surrounding elements Specifies whether or not to display a border around an <iframe> Specifies the height of an <iframe> Specifies a page that contains a long description of the content of an <iframe> Specifies the top and bottom margins of the content of an <iframe> Specifies the left and right margins of the content of an <iframe> Specifies the name of an <iframe> Specifies whether or not to display scrollbars in an <iframe> Specifies that the <iframe> should look like it is a part of the containing document Specifies the address of the document to embed in the <iframe> Specifies the HTML content of the page to show in the <iframe> Specifies the width of an <iframe>

    marginwidth
    name scrolling seamlessNew src srcdocNew width

    Pixels
    Name Yes, no, auto seamless URL HTML_code pixels

    Using iframe

    <iframe src="URL"></iframe> Example


    Set Height and Width <iframe src="demo_iframe.htm" width="200" height="200"></iframe> Remove the Border <iframe src="demo_iframe.htm" frameborder="0"></iframe> Use iframe as a Target for a Link <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3schools.com"

    You might also like