Presentation on theme: "How Tags are used to form your Web Page"— Presentation transcript:
1 How Tags are used to form your Web Page HTML Tag Mark-UpHow Tags are used to form your Web Page
2 <html> What is HTML? </html> HTML stands for Hyper Text Mark-up LanguageIt is the basic set of rules that web browsers use to interpret and display internet documentsHTML 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
3 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 setstags 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.
4 ElementsElements 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 endEverything between them is called the “content” of the element
5 <head> Elements </head> Web Pages are made up of “elements” – or distinct partsThe HeadCan hold lots of non-display informationThe Title is NOT displayed on the page, the title appears at the top of the window, in the colored barThe 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 pageNotes 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.
6 <body> The Body </body> This is where most of the page isIt can includeTablesListsQuotesPicturesJust 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
7 <h1> Heading Sizes </h1> <h1> Heading One<h2> Heading Two<h3> Heading Three<h4> Heading Four<h5> Heading Five<h6> Heading SixHeadings are not numbered as they go down the pageThe <h1> through <h6> tags refer to the size of the headingAny Heading tag can be used anywhere on the pageThis is the Heading for the section on HeadingsHeadings 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.
8 <p> Paragraphs </p> Paragraphs are separated by space from what comes before and afterThey 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.
9 Spaces and Returns HTML only recognizes ONE space between each word The <p> tag will separate with a spaceThe <br /> tag gives a “hard return”What you type:Roses are redViolets are blueMy feet stinkAnd so do youWhat you see:Roses are red Violets are blue My feet stink And so do you
10 Spaces and Returns HTML only recognizes ONE space between each word The <p> tag will separate with a spaceThe <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 redViolets are blueMy feet stinkAnd so do you
11 <ul> Un-Ordered List </ul> These are Bulleted listsThe 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 nothave borders </li><li> Make links </li><li> Insert pictures </li> </ul>What you see:Make paragraphsUse tables that may or may not have bordersMake linksInstert pictures
12 <ol> Ordered Lists </ol> <ol> stands for Ordered ListSignal 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 forclass</li><li> Be ready to participate</li><li> Raise your hand if you have acomment or question</li> </ol>What you see:Come to class on timeGet out your materials for classBe ready to participateRaise your hand if you have a comment or questionSee it
13 <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 BoldThis is ItalicizedThis is UnderlinedSee it
14 “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 thisHere is a line. HTML calls it a “header row”There will be a space before this
15 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 FolderEach person must create their own, individual, Basic Page