Basic HTML Handout & Exercise Web Technology

Size: px

Start display at page:

Download "Basic HTML Handout & Exercise Web Technology"

Jeremy Waters
5 years ago
Views:

1 What is HTML? Basic HTML Handout & Exercise Web Technology Hypertext Markup Language, or HTML for short, is what tells a web browser how a page should look. An HTML document contains two components: content (e.g., course schedule information) and HTML commands that specify the placement and formatting of the content (e.g., display the course name in bold, the instructor's name in italics, and show all the classes in a grid layout). HTML Elements 1. HTML tags are surrounded with angle brackets (< >). 2. HTML tags are not technically case sensitive, but you should always use lowercase. 3. HTML tags are often in pairs with a starting tag and ending tag (). 4. HTML tags must have a closing tag. For paired tags, this means the second tag: </p>, for others, the closing slash is in the tag itself: <br 5. "Nested" HTML tags should close in the reverse order of the opening tags: <strong>mrs. Graham Biography</strong> 6. Some tags can have properties (or "attributes") which further refine the effects of the tag: <p><font color="red">hello</font></p> <img alt="logo"> Basic HTML Tags <html> <head> <title> document title </title> </head> your page content </html> All HTML pages will have these tags. The <html> tag tells the browser to read and render the page in HTML. The ending </html> tag tells the browser that this is the end of the page. The <title>tag denotes the title displayed on the top left of the browser. It must be placed

2 inside the <head> tag, which is closed </head> before the body of the page begins. All of the content of the page, the text, images, media, etc, is enclosed between and. In the Beginning Original HTML code should look like this: <!DOCTYPE html> <html> <head> <title>[your title here]</title> </head> [your sentence here] </html> From this point All the additions from this point on will be done within the tags. All the content for the page goes within this tag. Paragraph To denote a paragraph, type <p> and </p> around the text included in the paragraph. This results in double spacing between text blocks, as the <p> tag inherently has a line break after it. We will now add a paragraph to our index.html file which is called the home page: <p>[write a brief statement about yourself here!]</p> Links HTML uses the tag called a hyperlink to link to another page on the Web. You will learn about 3 kinds of links: To a web page in the same folder To a web page in a different folder To an outside web page on the Internet

3 To do this, you will use the "anchor" tag (hence the <a>)to specify the page address, and the text you want to serve as the link. <a href="the address of the webpage or website goes in the quotes">the text that will show up on the page goes between the brackets</a> Example: <a href=" to the Antonian home page</a> address text in page Linking to a page in the same folder: <a href="resume.html">my Resume</a> If you have a page named resume.html in the same folder as your index.html, clicking the above link in your index page( index.html ) will send the user to your resume page. This is called a document-relative link. Linking to a page in a different folder: If you create a lot of folders on the server, you might need to know this document-relative shortcut:../ <a href="../resume.html">my Resume</a> This tells the browser that the link is in one folder above the current folder. In this example, your directory structure might look like this: public_html (folder) index.html resume.html You are on this page images (folder) pic.jpg images.html For this example you are on the images.html page that is in the images folder. The link <a href="../resume.html">my Resume</a>

4 tells the browser to move one folder up, to public html in order to find the webpage resume.html. Conversely, if you want to send the user from index.html to images.html you would use this: <a href="images/images.html">my Pictures</a> This link tells the browser to go to the images folder in order to find the images.html webpage. We will now add three document-relative links to our page: Add the link code above your paragraph. This will eventually become the navigation portion of your webpage. <a href="index.html">home </a> <a href="courses.html">courses</a> <a href="personal.html">personal</a> <p> [Write a brief statement about yourself here!]</p> Additional Practice with tags The following are additional tags you can practice with. Feel free to add them to your home page to play around with them. Headers Header tags are special predefined styles that instruct the browser to display text in a certain way. These six tags (h1 through h6) are useful for creating section headings and sub-headings. <h1>resume</h1> <h2>your Name</h2> <h3>123 Fake St. Anytown, USA.</h3> The <h1> tag will cause the text to be very large; the <h2> slightly smaller, etc. The text will also be formatted as if you wrote a paragraph tag, with an automatic line break after.

5 Making Lists Have you ever used the "numbering" or "bullets" list feature in MS Word? It's pretty spiffy just click either button and Word automatically creates a numbered or bulleted list as you type. Well, HTML has a similar feature (although not quite as automatically delicious as MS Word). <h3>communications student :</h3> <ol> <li>makes READ posters</li> <li>makes Graphic Novels</li> <li>enjoys learning</li> <li>has a growth mindset</li> </ol> <h4>aspirations and Goals</h4> <ul> <li>to get 100 on each assignment</li> <li>get to college </li> </ul> The <ol> tag creates an "ordered" or numbered list of items. The <ul> tag creates an "unordered" or unnumbered list of items. Which one you use in any given situation is largely dictated by your situation's needs: it's unlikely that you'd give someone a numbered shopping list (they might confuse the step numbers with the amount of items you want). Similarly, you're unlikely to create a bulleted set of directions your recipient may skip necessary steps or perform them out of order. Tables Tables are composed of rows and cells, much like in Microsoft Excel, and are great for representing information in, well, tabular format. Tables can be a little tricky to understand, but if you indent the HTML code properly (as shown below), you can make the code easier to understand. <table> <tr> <th>this is the column header of column #1</th> <th>this is the column header of column #2</th> </tr> <tr> <td>this is the first cell of row #1</td> <td>this is the second cell of row #1</td> </tr> <tr>

6 <td>this is the first cell of row #2</td> <td>this is the second cell of row #2</td> </tr> </table> This is the column header of column #1 This is the column header of column #2 This is the first cell of row #1 This is the second cell of row #1 This is the first cell of row #2 This is the second cell of row #2 The <tr> tags specify a horizontal ROW in the table and the <td> tags specify each CELL within each ROW. The <th> tag specifies the table header. It is written inside the <tr> table row tag. <th>data is automatically centered, and usually rendered stronger than the <td> data. <td> information is aligned left by default. Because HTML tables can be very complex, I have indented the various tags to indicate which one is subordinate to the other when dealing with tables, it's useful to indent your HTML tags this way in order to give you an easy-to-read representation of how the table tags are related. It can also help you spot any errors in more complicated tables, should you forget to include a tag. Tables used to be used for layout in HTML pages, but are now shunned because CSS has made layout both more flexible and more accessible. You should only use tables if you have tabular data to enter.

CSC 121 Computers and Scientific Thinking

CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language