1 / 22

End User Computing

An Introduction to HTML. Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science sujana@cs.nuim.ie. End User Computing. Course Outline. Lectures & Labs Monday 1 st / 8 th 3-4pm Wednesday 3 rd / 10 th 3-5pm Thursday 4 th / 11 th 3-4pm

delph
Télécharger la présentation

End User Computing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. 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

  4. HTML • HTML is a language used to define how information is structured in a webpage • HTML stands for HyperText Markup Language • HyperText 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

  5. What are Tags? • Tags are blocks that tell your browser how the information is to be structured. • There are 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

  6. 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

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

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

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

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

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

  12. 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

  13. 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

  14. 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 <p> … </p>tags. End User Computing

  15. 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: <h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6> End User Computing

  16. More tags • <b>…</b> puts text in bold • <i>…</i> puts text in italics • <u>…</u> 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. • <br/>inserts a line break End User Computing

  17. 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

  18. 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: • <ahref=”http://www.nuim.ie”>NUI Maynooth</a> The text that will appear as the link on the page Where the link will take the user who clicks it. End User Computing

  19. 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

  20. 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)‏ Image does not require a closing tag. nuim.jpg End User Computing

  21. 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. page3.html End User Computing

  22. 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

More Related