How Tags are used to form your Web Page HTML Tag Mark-Up How Tags are used to form your Web Page
<html> What is HTML? </html> HTML stands for Hyper Text Mark-up Language It is the basic set of rules that web browsers use to interpret and display internet documents HTML is an acronym for Hyper Text Mark-up Language. These are the rules that were agreed upon by an international committee on Internet Communication. Every Browser program, Firefox, Internet Explorer, Netscape, etc. follows these rules when they display the html documents that make up the entire internet. These rules make it possible for you to visit web pages from around the world with any kind of internet browser program and you will see (pretty much) what the author wanted you to see. Tag Mark-up Sheet
Tags Tags mark the beginning and end of a particular element. They (almost) always <b>bracket</b> the element <html> <head> <title> Mark-Up Assignment </title> </head> <body> Here is the BODY</body> </html> Tags are the most basic part of the “Language” in Hyper Text Mark-up Language (html). If you have looked at the source code for a myspace page or any other web page, for that matter, you will see hundreds of these tags. You can tell a tag because tags are enclosed in angle brackets < & >. Whatever is inside the bracket is the tag. You use a <p> to mark the beginning of a paragraph and a </p> to mark the end of a paragraph. That tag tells the web browser that you want a space between the paragraph and some other element. Notice in the example that there are beginning tags: <html> <head> <title> and <body> and exactly the same number of end tags: </title> </head> </body> and </html>. Almost all tags have a beginning and an end. These are called “closed elements”. There are a few notable exceptions that you may use in the course of this project. These are called “open elements” and appear where there is just no need for an end, because the element just is what it is. For instance, <br /> stands for “break” which just ads a line of space across your page wherever you put the tag. <img /> is the “image” tag, and while you will have several “attributes” which you will need to add inside the tag, for the most part it just tells the browser that you want to put a picture or image in a particular location. Since pictures are finite, they do not need an end tag to let the browser know that the end of the picture has come. We will discuss these and other specific tags later. What you need to understand here is that: tags come in sets tags are always supposed to be in lower case letters (CAPS will work now, but not in the future) tags separate one element, or part of the web page, from other elements.
Elements Elements are parts of the document that are distinguished by tags <html> <head> <title> Mark-Up Assignment</title> </head> <body> Here is the BODY</body> </html> Closed Elemets have a beginning and end Everything between them is called the “content” of the element
<head> Elements </head> Web Pages are made up of “elements” – or distinct parts The Head Can hold lots of non-display information The Title is NOT displayed on the page, the title appears at the top of the window, in the colored bar The next element is the head. Here is a sample of the types of information you put in the head of the page: Meta information about your authorship and the content of your page Notes about what is going on. Notes start with <!-- and end with -->. Nothing inside the note will be displayed on the actual page, but it could explain something about a part of your page to those who care to study your code. The Title, which has its beginning and end within the head element. It will not be displayed in the browser window. The Title will be what is written in the colored bar at the very top of your page. It is not the File Name (although when you name your file, you might want to use the same name as what you have for your Title). You can also include an Internal Style Sheet, which is a quick way to change the appearance of the tags you have in your page. This is not necessary, but it can save you loads of time formatting your page.
<body> The Body </body> This is where most of the page is It can include Tables Lists Quotes Pictures Just about anything else <body> <!-- This where the text of the web page goes. Anything that appears in the browser window should be in the body. --> <p> This is my web page. I will replace this text with the text from my essay</p> </body> </html> This is the next major part of your web page. The Body is what people actually see when they look at your web site. When you open your basic page in a browser, you should only see the sentence that is between the two paragraph tags <p> and </p>. The Note about “this is where the text of the web page goes…” does not appear, because it has the note tags <!-- and -->. If, however, you don’t write the note tags correctly, you will see your note, so be careful. Everything that you want people to see – like paragraphs, headings, and pictures – are supposed to be placed in the Body of the web page. See it
<h1> Heading Sizes </h1> <h1> Heading One <h2> Heading Two <h3> Heading Three <h4> Heading Four <h5> Heading Five <h6> Heading Six Headings are not numbered as they go down the page The <h1> through <h6> tags refer to the size of the heading Any Heading tag can be used anywhere on the page This is the Heading for the section on Headings Headings are what you might usually call titles. It’s very easy to confuse the two. In fact, if you did want the title of your page to appear in the browser window with the rest of your text, you could include it AS A HEADING. The tags for headings go from <h1> to <h6>. That’s all there are. There is no <h7> tag. <h1> is the largest. By default, it is uses a 24 point Times New Roman font. It will have spacing above and below it and be aligned on the left side of the screen. You can change these settings in the individual settings, or you can make an internal or external style sheet, but for now, lets just keep them at their default values. They can be used anywhere on the page, in any order. Remember: the numbers have nothing to do with placement, and everything to do with the size and style of the web page.
<p> Paragraphs </p> Paragraphs are separated by space from what comes before and after They are not, by default, indented <p>Here is some interesting information about this.</p> <p>On the other hand, there is this information here.</p> Here is some interesting information about this. On the other hand, there is this information here. The paragraph tags <p> and </p> are the first tags you will need to add to you web page after you add in the text from your essay. The default settings for paragraphs are that there is no indent, but there is a space between each paragraph.
Spaces and Returns HTML only recognizes ONE space between each word The <p> tag will separate with a space The <br /> tag gives a “hard return” What you type: Roses are red Violets are blue My feet stink And so do you What you see: Roses are red Violets are blue My feet stink And so do you
Spaces and Returns HTML only recognizes ONE space between each word The <p> tag will separate with a space The <br /> tag gives a “hard return” What you type: <p> Roses are red <br /> Violets are blue </p> <p> My feet stink <br /> And so do you </p> What you see: Roses are red Violets are blue My feet stink And so do you
<ul> Un-Ordered List </ul> These are Bulleted lists The list begins with <ul> It ends with </ul> They don’t have a particular sequence <li> each thing in the list gets list item tags </li> What you type: <ul> <li> Make paragraphs </li> <li> Use tables that may or may not have borders </li> <li> Make links </li> <li> Insert pictures </li> </ul> What you see: Make paragraphs Use tables that may or may not have borders Make links Instert pictures
<ol> Ordered Lists </ol> <ol> stands for Ordered List Signal the end of the list </ol> Each element still gets the <li> & </li> tags. The browser adds the numbers (or letters or Roman numerals) What you type: <ol> <li> Come to class on time</li> <li> Get out your materials for class</li> <li> Be ready to participate</li> <li> Raise your hand if you have a comment or question</li> </ol> What you see: Come to class on time Get out your materials for class Be ready to participate Raise your hand if you have a comment or question See it
<b><u><i> Other Formats </i></u></b> What you type: What you see: <body> <b>This is Bold </b> <i> This is Italicized </i> <u> This is Underlined </u> </body> This is Bold This is Italicized This is Underlined See it
“Open Elements” Open Elements are tags that do not have any content following them or within an opening and end tag. <br> <hr> <img> In future browsers, all Elements must be “closed” <br /> <hr /> Here is a line. HTML calls it a “header row” <hr> <br> There will be a space before this Here is a line. HTML calls it a “header row” There will be a space before this
What you need to do: Fill in all the tags that are indicated on the Tag Mark-Up handout. Go to a computer and create your own “Basic Page” using the exact text presented in the folders at the computer. Save the Basic Page into your File Folder Each person must create their own, individual, Basic Page