Scribd Logo
Upload

Welcome to Scribd!

  • 61 views

    Web Page Design: Opening and Closing Tags

    Uploaded by

    Israel Pope
    This document provides an introduction to HTML tags through a series of lessons: 1. It describes opening and closing tags, and how every HTML file begins with <html> and ends with </html>. It also introduces the <head> and <title> tags. 2. It discusses block tags like <h1> for headings and <p> for paragraphs that start elements on new lines. Inline tags like <strong> and <em> are also introduced. 3. Attributes are described which allow customizing tags, such as using the style attribute to add CSS formatting like text colors and sizes. 4. The <img> tag is explained for inserting images into web pages.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Web Page Design: Opening and Closing Tags

    Uploaded by

    Israel Pope
    61 views15 pages
    This document provides an introduction to HTML tags through a series of lessons: 1. It describes opening and closing tags, and how every HTML file begins with <html> and ends with </html>. It also introduces the <head> and <title> tags. 2. It discusses block tags like <h1> for headings and <p> for paragraphs that start elements on new lines. Inline tags like <strong> and <em> are also introduced. 3. Attributes are described which allow customizing tags, such as using the style attribute to add CSS formatting like text colors and sizes. 4. The <img> tag is explained for inserting images into web pages.

    Original Description:

    Original Title

    Web-page design

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides an introduction to HTML tags through a series of lessons: 1. It describes opening and closing tags, and how every HTML file begins with <html> and ends with </html>. It also introduces the <head> and <title> tags. 2. It discusses block tags like <h1> for headings and <p> for paragraphs that start elements on new lines. Inline tags like <strong> and <em> are also introduced. 3. Attributes are described which allow customizing tags, such as using the style attribute to add CSS formatting like text colors and sizes. 4. The <img> tag is explained for inserting images into web pages.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    61 views15 pages

    Web Page Design: Opening and Closing Tags

    Uploaded by

    Israel Pope
    This document provides an introduction to HTML tags through a series of lessons: 1. It describes opening and closing tags, and how every HTML file begins with <html> and ends with </html>. It also introduces the <head> and <title> tags. 2. It discusses block tags like <h1> for headings and <p> for paragraphs that start elements on new lines. Inline tags like <strong> and <em> are also introduced. 3. Attributes are described which allow customizing tags, such as using the style attribute to add CSS formatting like text colors and sizes. 4. The <img> tag is explained for inserting images into web pages.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 15

    WEB PAGE DESIGN

    Lesson 1: Tags

    Opening and Closing Tags


    HTML code is most commonly referred to as tags. The majority of tags have both
    an opening tag and a corresponding closing tag. Every HTML file begins with this
    opening tag:

    <html>

    Every HTML file ends with the corresponding closing tag:

    </html>

    Notice the / in the closing tag? All closing tags must have this slash. You know
    why? Because it's a closing tag, that's why. Below the opening html tag come
    the opening and closing head tags:

    <head> </head>

    The head tag doesn't have any affect on what appears on the web page, it's job
    is to hold certain other types of tags, one being the title tag:

    <title>My First Webpage</title>

    Ah, look at that, there's some text between the opening and closing title tags,
    this is where the title of a web page is entered, it will appear in the browser's title
    bar:

    1
    Next comes the closing head tag. Remember, a closing tag has a slash ( this
    thing / ). So this is what the code should look like so far:

    <html>
    <head>
    <title>My First Webpage</title>
    </head>

    Now let's get to putting something on the webpage. Everything that is seen on
    web pages is found between the opening and closing body tags:

    <body> </body>

    Example:

    <html>
    <head>
    <title>My First Webpage</title>
    </head>>

    <body>
    Look Ma, I'm Making my first webpage
    </body>
    </html>

    Notice in the example that the closing html tag was added to the code. This
    means we are finished (at least for now), so save your code following the
    instructions given in the introduction of this tutorial.

    Curious to see how the webpage looks? Open the webpage in your browser and
    have a look. See? The text between the body tags is what shows on the
    webpage. In the next lesson you will be introduced to more tags and what they
    do. So how about it, you ready for lesson two?

    2
    Lesson 2: Block Tags

    Making Headings
    Let’s make the web page a little more eye catching by adding a large, bold
    heading using the heading tags:

    <h1></h1>

    Remember from the previous lesson, things which appear on web pages are
    enclosed between the opening and closing body tags, that also includes other
    tags which affect how things are seen on web pages:

    <body>
    <h1>Learning HTML</h1>
    </body>

    The number 1 beside the letter h determines how large the heading will be. Any
    number from 1 to 6 can be used, 1 makes the largest heading, and 6 makes the
    smallest.

    Heading tags belong to what are called “block” tags. These kind of tags don’t
    allow any outside text to line up beside them, you will see the effect in a moment
    but first let’s see how our HTML file is shaping up:

    <html>

    <head>
    <title>My First Webpage</title>
    </head>

    <body>
    <h1>Learning HTML</h1> Look Ma, I'm making a webpage!
    </body>

    </html>

    Open your web page and this is what it should look like:

    3
    See how the text outside the h1 tags is on a separate line? This is what block
    tags do, they force the stuff they don’t enclose to be on a separate line. Another
    block tag is the paragraph tag:

    <p></p>

    Any text put between the opening and closing p tags makes one paragraph.

    Hitting the “Enter” key has no effect on web pages, to start a new line within a
    paragraph the br tag is needed:

    <br>

    The br tag is one of the few HTML tags which does not have a corresponding
    closing tag. These kind of tags are called “single” tags. Here is an example of
    how the br tag can be used in a paragraph:

    <p>Look Ma,<br>I’m making a webpage!</p>

    The result would look like this:

    Look Ma,
    I’m making a webpage!

    4
    Lesson 3: Inline Tags

    Formatting Text
    Words within a sentence or paragraph can be made bold with the strong tag like
    so:

    <p>
    One word in this sentence will be bold <strong> guess</strong> which one?
    </p>

    Did you pick "guess"? Then you passed the grade, give yourself a pat on the
    back.

    Italicized words are made by enclosing them in em tags:

    <em>Your text here</em>

    The strong and em tags belong to a group of tags known as “inline” tags, these
    kind of tags don’t force text to start on a separate line the way block tags do.
    They can be used together to make text both bold and italicized:

    <strong> <em>Your text here</em></strong>

    It doesn’t matter which tag is used first but it is important to note that when using
    combination of tags their corresponding closing tag should be listed in the correct
    order, if the order starts with the opening em tag, it should end with the closing
    em tag, for example:

    this is correct - <em><strong>text here</strong></em>


    this is not correct - <em><strong>text here</em></strong>

    Another inline tag is the span tag:

    <span></span>

    5
    Lesson 4: Attributes

    Telling Tags What To Do


    We can change the way tags display things on web pages by putting what’s
    called an "attribute" into an opening tag. Many of the things that were done with
    attibutes are now done with CSS, so this lesson will show you how to put CSS
    code into tags by the use of the style attribute:

    <h1 style="text-align:center;">My Webpage</h1>

    6
    The style attribute’s job is to hold CSS code, that’s the stuff in the quotation
    marks. In the above example it's telling the h1 tag to center the text on the web
    page. Notice that there is a colon between text-align and center and at the end
    of center there is a semi colon. This is how CSS commands are structured.

    The text in our example can further be changed by adding another CSS
    command to the style attribute:

    <h1 style="text-align:center; color:red;">My Webpage</h1>

    The result would be red text centered on the web page. An unlimited amount of
    CSS commands can be added to the style attribute as long as they are enclosed
    between the quotation marks and each command ends with a semi colon.

    The style attribute can be put in any opening tag to change some aspect of the
    tag, for instance when used with the body tag, all the text on a web page can be
    displayed in a different font:

    <body style="font-family:arial;">

    The font-family command changes the text font, in this example it’s in Arial
    style.Adding a CSS background command in the body tag changes the page's
    background color:

    <body style="background:red;">

    That would give your web page a red background (you don’t really want a red
    web page do you?). Colors can be specified by either using the name of the color
    or its color code, for example #ff0000 is the color code for red:

    <body style="background:#ff0000;">

    The number sign, # must be included in front of the code when specifying colors
    by their color code.

    Changing Font Size


    Changing the size of text is easy with the CSS font-size command:

    <em style="font-size:40px;">I’m bigger</em> than you

    The result would look like this:

    I'm bigger than you

    7
    Size of text is determined by the number, the larger the number the bigger the
    text, px stands for "pixels".

    CSS commands are usually put in a CSS file called an "external style sheet" but
    the style attribute is a simple way to use CSS directly in the HTML code until you
    get to know more about CSS.

    Lesson 5: Graphics

    Putting A Picture On The Web Page


    Making a website is not complete without adding graphics to make it look nice
    and pretty. Placing a picture on a web page is done with the img tag. The img
    tag is a single tag so does not require a closing tag:

    <img src="filename.jpg">

    The img stands for "image", src is an attribute, it tells the browser where to find
    the picture. The stuff in the quotation marks is the file name of the graphic,
    replace filename.jpg with the file name of your picture and be sure it’s between
    the quotes.

    Note
    The file name of the picture must also include its format, e.g. jpg as in the above
    example. More on image format later in this lesson.

    To keep things simple, for now store your pictures in the same place as your web
    pages, for example if you keep your HTML files in a folder called "my pages", put
    your pictures there too.

    Every picture on a web page has its very own img tag:

    <img src="button.gif">
    <img src="button2.gif">

    That will put two pictures side by side on the page:

    If an img tag is enclosed between the opening and closing p tags, the other
    image will start on a new line:

    8
    <p><img src="button.gif"></p>
    <img src="button2.gif">

    Result:

    Give your pictures a description by adding an alt attribute to the img tag like so:

    <img src="button2.gif" alt="light blue button">

    The alt attribute will make the description appear if a browser does not display
    images. In some browsers the description will also pop up when a mouse pointer
    is moved over the picture.

    Image Format

    Pictures on the web are usually either in gif or jpg format. The gif format is
    mostly used for pictures with solid blocks of color such as charts, or when an
    image requires a transparent background. The jpg format is suitable for pictures
    with subtle color changes such as photos.

    Lesson 6: Links

    Putting It All Together


    Links, this is what the web is all about and it’s simple to do with anchor tags:

    <a></a>

    The anchor tag comes with the href attribute. It means “hpertext reference”. This
    attribute tells the browser where to find a link. A link to a web page within the
    same directory (folder) of the website would look like this:

    <a href="filename.html">here goes text to be clicked</a>

    The href attribute contains the file name of the destination web page. The file
    name is enclosed in quotation marks and it includes the html extension. The text

    9
    between the opening and closing a tag is the link people will click. To keep things
    simple, for now place all your web pages in the same folder (directory).

    Linking to another website is done by putting the entire website address (url) into
    the href attribute:

    <a href="http://www.siteaddress.com">text to be clicked here</a>

    Be sure that http:// is included in the website address. Turning an image into a
    link is done by surrounding the img tag with the opening and closing a tags:

    <a href="filename.html"><img src="filename.jpg"></a>

    Replace filename.html with the file name of the page or website address, and
    replace filename.jpg with the file name of your picture.

    By default image links have a blue border around them, the border can be
    removed by adding the style attribute with a CSS border command:

    <img src="filename.jpg" style="border:0;">

    Email Link
    Putting an email link on web pages is done by entering the email address in the
    href attribute preceded by a mailto: command like so:

    <a href="mailto:waterart.bizland.com">here goes what people click</a>

    Notice there is a colon between mailto and the email address and that they are
    enclosed in quotation marks. By the way, in case you haven’t noticed by now,
    there is a space between the a and the href attribute.

    And that's how to make links, next we're going to make a list in lesson 7.

    Making a Bulleted List


    There may come a time when you would like to add a list to a web page, or
    maybe not, but just in case here is how to make a list. A list starts and ends with
    the "unordered" list tags:

    <ul></ul>

    The ul stands for “unordered list”, it will get you bulleted text, you know, a dot
    beside the text. The opening ul tag starts the list and the closing ul tag ends the
    list, in between goes the text surrounded by the opening and closing "list item"
    tag:

    <li></li>

    10
    Example:

    <ul>

    <li>Beagle</li>
    <li>Terrier</li>
    <li>Chihuahua</li>

    </ul>

    Result:

     Beagle
     Terrier
     Chihuahua

    Any number of items can be added to the list as long as they are enclosed by the
    opening and closing li tags. And that's how to make a list, let's now move on to
    making tables, don't worry no carpentry skills required. Next: lesson 8.

    Lesson 8: Tables

    Making A Table
    We’re talking here tables for holding data not the dinner table. Tables are useful
    in laying out the design of web pages so it’s well worth the time to learn how to
    make them. A table starts and ends with the table tag:

    <table></table>

    Between the opening and closing table tags go a couple of other tags, the tr tag:

    <tr></tr>

    It stands for “table row” and will make up one row across the table. Between the
    tr tags are found the td tags:

    <td></td>

    The td stands for “table data” it forms one box called a “cell” which contains
    content seen on the web page such as text or graphics. Here’s how the table
    code is put together:

    11
    <table border="1">

    <tr>
    <td>Beagle</td>
    <td>Chihuahua</td>
    </tr>

    <tr>
    <td>Terrier</td>
    <td>Collie</td>
    </tr>

    </table>

    Putting a border attribute in the table tag will help you see how the table and
    cells are formed, setting the border attribute to "0" will remove the borders
    altogether.

    Take a close look at the code, this table will have 2 rows with 2 cells in each row.
    The stuff between the opening and closing td tags is what will be in each cell.
    Note that each row is finished off with the closing tr tag. Finally the table is
    finished by ending it with the closing table tag.

    Result:

    Beagle Chihuahua
    Terrier Collie

    Remember the style attribute from lesson 4? Put it into the opening td tags with
    a CSS padding command to add some space around the content of the cells:

    <td style="padding:10px;">Beagle</td>

    Result:

    Beagle Chihuahua

    Terrier Collie

    We can make a table larger by putting the style attribute into the opening table
    tag and giving it a CSS width command:

    <table border="1" style="width:300px;">

    Result:

    12
    Beagle Chihuahua

    Terrier Collie

    Add the a CSS vertical-align command to a td tag and the content of that cell
    will start at the top of the cell:

    <td style="vertical-align:top;">Chihuahua</td>

    Result:

    Beagle Chihuahua

    Terrier Collie

    Let's change the color of a cell with CSS background command:

    <td style="background:silver;">Terrier</td>

    Result:

    Beagle Chihuahua

    Terrier Collie

    And that folks is how a table is put together. By now you have all the tags you
    need to put together a website, I hope you enjoyed the lessons enough to buy
    my book, HTML Made Easy with a free bonus CSS tutorial.

    Once your website is ready for its debut on the world wide web, you will want to
    know how to put it on the internet, learn how it is done in the Uploading Web
    Pages tutorial.

    13
    Lesson 9: Frames

    Do You Really Want Them?


    Scroll down the page, see what happened? The top part of the page remained
    stationary while the rest of the page moved. That's what's called frames. A
    webpage with frames may look interesting but it can pose problems, not all
    browsers support frames, some search engines ignore web pages with frames,
    and HTML 5, the newest version of HTML code that's in the works, won’t support
    frame tags. But if you still want to know how they are made read on.

    More Than One Page


    A web page with frames is actually made up of several pages put together into
    one. This page for example is made of three pages: One for the top, another for
    the main section, and a third one which brings them together.

    You can see that this page has two frames, the top frame containing the page
    with the title, and the bottom frame containing the page with the sidebar and
    main content. Webpages within the frames are written just like any other html file
    but the page which brings them together has it's own set of html tags. Here's how
    the code looks for this page:

    <html>

    <head>
    <title>frames</title>
    <head>

    <frameset rows="30%,70%">
    <frame src="title.html">
    <frame src="main.html">
    </frameset>

    </html>

    Notice that the html file starts out just like any other web page except there are
    no body tags. In their place are the opening and closing frameset tags.

    The rows attribute in the frameset tag makes horizontal frames, vertical frames
    are made with the cols attribute. The numbers determine how much of the web
    page the frames will take up, in the example the top frame takes 30% and the
    second frame 70% of space. The percentages need to be distributed so that they
    add up to 100% and notice they are enclosed in quotation marks. Each
    percentage is separated by a comma.

    14
    Next come the frame tags, they are single tags so have no closing tag. The src
    attribute is telling the browser which web page is to display in the frame by
    default (when the visitor arrives on the web page). In the example the first frame
    holds a web page with the file name "title.html" and the second frame holds a
    web page named "main.html".

    More frames can be put on a web page by adding more frame tags to the code.
    To remove frame borders add the border="0" attribute into the opening
    frameset tag like so:

    <frameset rows="30%,70%" frameborder="0">

    Linking From Framed Web Pages


    To get links working properly on framed web pages, each frame needs to be
    named so that the anchor tags will know into which frame to send the destination
    web page when a link is clicked. This is done by putting the name attribute into
    the frame tags like so:

    <frame src="main.html" name="myframe">

    The name of the frame can be anything, once the frame is named, the link is
    directed to it through the target attribute in the anchor tags:

    <a href="testage.html" target="myframe">Your link</a>

    The target attribute told the link to send the web page into a frame named
    myframe. The target attribute can also force links to break out of frames
    completely and load like a regular web page when its value is set to "_top" like
    so:

    <a href="testage.html" target="_top">Your link</a>

    And that's how a web page with frames is made. So do you still want them?

    Prepared by: Mr. Mirin


    (IT Teacher_2013)

    15

    You might also like