An Introduction to HTML Sujana Jyothi Research Lab

An Introduction to HTML Sujana Jyothi Research Lab 1, Callan Building, Department of Computer Science sujana@cs. nuim. ie End User Computing

Course Outline • Lectures & Labs • Monday 1 st / 8 th 3 -4 pm • Wednesday 3 rd / 10 th 3 -5 pm • Thursday 4 th / 11 th 3 -4 pm • Assignment due 26 th February 2010 by 5 PM. End User Computing

Module Details Learning Outcome: By the end of this module you will be able to create a webpage. You will learn how a webpage is structured using HTML and how a webpage is styled using CSS. End User Computing

HTML • HTML is a language used to define how information is structured in a webpage • HTML stands for Hyper. Text Markup Language • Hyper. Text just stands for the text that gets sent around the net • Markup Language just means that the text is surrounded by tags which tell us what type of information is held within the tags End User Computing

What are Tags? • Tags are blocks that tell your browser how the information is to be structured. • There a lot of them but we'll be only covering some of the more useful ones. • Text is surrounded by angle brackets to designate a tag <tag>Text</tag> • An important thing to remember is that tags must be opened and closed. End User Computing

HTML Files • If you open an HTML file in a text editor you will see text surrounded by tags • A browser opens this file and decides how to structure the document based on these tags so their order and placement is critical. • The good news is that it is quite easy to build a simple webpage with knowledge of only a few tags. End User Computing

Lets try and make a webpage <html> <head> The webpage is <title>Course on HTML</title> separated into </head> tags and text. <body> <h 1>HTML Course</h 1> This is the course website for the HTML course. All the slides, laboratory sheets and material will be here along with course details. </body> </html> End User Computing

Lets try and make a webpage <html> <head> Every HTML file begins and ends <title>Course on HTML</title> with HTML </head> tags <body> <h 1>HTML Course</h 1> This is the course website for the HTML course. All the slides, laboratory sheets and material will be here along with course details. </body> </html> End User Computing

Lets try and make a webpage Next we have the head <html> and body tags. The head <head> <title>Course on HTML</title> section only contains information about the </head> page, while within the <body> Body section is the <h 1>HTML Course</h 1> actual information. This is the course website for the HTML course. All the slides, laboratory sheets and material will be here along with course details. </body> </html> End User Computing

Lets try and make a webpage The title of the webpage <html> goes inside the title tag. <head> <title>Course on HTML</title> This is then displayed in the title bar of </head> your browser. This is the <body> bar at the very top of <h 1>HTML Course</h 1> the browser. This is the course website for the HTML course. All the slides, laboratory sheets and material will be here along with course details. </body> </html> End User Computing

Lets try and make a webpage <html> h 1 means heading one. There are six header tags, <head> <title>Course on HTML</title>and like in Word different headers give you different </head> font sizes and styles. <body> <h 1>HTML Course</h 1> This is the course website for the HTML p means paragraph and tells the browser course. to put the text enclosed into a paragraph All the slides, laboratory sheets and material will be here along with course details. </body> </html> End User Computing

Lets try and make a webpage Ok the first step in making this webpage is to open up notepad and to put the html text into it. Let’s make a web-page together now…. End User Computing

How to make a webpage • The first step is open up notepad (Click on Start->Run and type in notepad). • Then you type in your HTML, the tags and the text we have just gone through and save it to a file (page. html). • Once you've finished with the page and saved, just double click on the file and it will open up inside your browser. End User Computing 2008

What it looks like Once its saved we open it up with a browser (Firefox or Internet Explorer) Did you notice that the new lines put into notepad did not translate to new lines on the displayed page? To put in new lines you need to separate your sections into paragraphs using … tags. End User Computing

More tags • HTML has lots of tags allowing you to structure your webpage in any number of different ways. We will only be using a subset of these tags. • There are six header tags: <h 1>…</h 1> <h 2>…</h 2> <h 3>…</h 3> <h 4>…</h 4> <h 5>…</h 5> <h 6>…</h 6> End User Computing

More tags • … puts text in bold • … puts text in italics • … underlines text • <ul>…</ul> is an unordered list • <ol>…. </ol> is an ordered list • <li>…. </li> is a list item, i. e. like a bullet point. • <hr/> inserts a horizontal line across a page. • inserts a line break End User Computing

A reminder • Remember we said that HTML is used to structure a document not to style a webpage. • We will deal with how to style a webpage in the next lecture. End User Computing

Tag attributes • An attribute is extra information included in the tag. • These occur for many reasons such as: • in the image tag where they are used to tell the browser where the image is • with a link where they are used to tell the browser where the link should take the user. • Example: • <a href=”http: //www. nuim. ie”>NUI Maynooth</a> Where the link will take the user who clicks it. End User Computing The text that will appear as the link on the page

Hyperlinks • On the last page a hyperlink was shown • Links are encapsulated between <a> tags called anchors. • They are used to connect web pages together. So a web site is a collection of web pages which are connected with hyperlinks. • The most important part of the hyperlink is the href attribute. End User Computing

Images • The tag for images is <img>, it should always be used with two attributes: • the source attribute stating where the image is located • the alternative attribute is used to describe the image. • <img src=”nuim. jpg” alt=”Pic of Maynooth Logo” /> A description of the image should be included (one very good reason is for accessibility) nuim. jpg End User Computing Image does not require a closing tag.

Finishing Up • Most important HTML tags… but there are lots more • We have yet to look at how to style a webpage (different font sizes, different font colours. . . ) • Incorporating the new tags, the links and images, take a look at the new webpage for the course. page 3. html End User Computing

Next time • Wednesdays we're going to be doing an introduction to CSS (Cascading-Style-Sheets) where you'll learn how to style a webpage. • Then you'll get your first chance to create your own webpage and style it. End User Computing