HTML_workshop_1
advertisement
Intro to HTML Workshop Welcome This slideshow presentation is designed to introduce you to the basics of HTML. It is the first of three HTML workshops available at www.tinyurl.com/rpi123. In addition to the three HTML workshops, there are also workshops on CSS, PHP, and MySQL. These slides are based on source material found at the w3schools.com website. You are encouraged to visit the site – it is a great resource. What is HTML? HTML is a language for describing web pages HTML stands for Hyper Text Markup Language HTML is not a programming language... it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages Hypertext Markup Language HyperText is how you move around on the web — by clicking on hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear — there is no set order to do things in. Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (a header, for example). HTML is a language, as it has code-words and syntax like any other language. Alternate Acronym W3C HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the W3C, the organization charged with designing and maintaining the language. http://www.w3.org/ HTML Tags HTML markup tags are usually called HTML tags Tags are keywords surrounded by angle brackets like <html> Tags normally come in pairs such as <b> and </b> The first tag in a pair is the start (opening) tag, the second tag is the end (ending) tag HTML Tags HTML consists of a series of short codes typed into a text file by the site author — these are the tags. The text is then saved as an html file, and viewed through a browser like Firefox, Safari, Chrome, and Internet Explorer. HTML Tags This browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended. Writing your own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML pages. HTML Cheat Sheet If you would like a handy reference sheet for all the markup you will be learning, check out this cheat sheet (also available as a pdf). HTML Exploring Let's roll up our sleeves and dabble a bit. First, we are going to create an HTML document. Follow this link and copy the code to your computer's clipboard. HTML Exploring Next, we are going to paste that code into a 'sandbox' – a place to experiment with code. Follow this link to the “try it” editor. Delete the code in the box on the left. Paste the copied code into its place and click the button that says “Edit and click me >>”. HTML Exploring Take a look at the code on the left side of the sandbox and what it produces on the right side. First, notice that the code between the <head></head> tags doesn't appear on the page. That is a place for special code, lines of metadata, and other stuff we'll cover later. The code between the <body></body> tags produces the things we see on the right. HTML Anchor Links Let's look at the code between the <body></body> tags. The first item is an 'anchor link' – a place in a document that you can 'link' to. <a name="top"></a> At the bottom of the page is a hyperlink to the top of the page. The anchor link is the destination of that hyperlink. Notice that the link at the bottom refers to the anchor link by name. HTML Line Breaks The next tag to appear is the line break <br /> tag after the title of the poem. These tags are called empty tags because they don't have an end tag: Lewis Carroll’s Jabberwocky<br /><br /> Think of it as a carriage return on a typewriter. Wait, you probably don't even know what a typewriter is. Boy am I getting old... HTML Hyperlinks Next, you'll notice the series of hyperlinks (which we'll just call links from here on out). They look like this: <a href="destination">Text that gets linked</a> href is short for hypertext reference. Links can point to other pages on the WWW or to anchor links within the same document as we saw a moment ago. HTML Hyperlinks As you scan down the page of code, notice what happens when the <br /> tags aren't present. The text on the right appears as one big clump even though the code is broken into stanzas. Since we're on the subject of links, let's skip the <img> tag for a moment and examine the e-mail address link... HTML Hyperlinks This link is special because it doesn't link to a page. Rather it tells the browser to behave differently because the destination is an e-mail address: <a href="mailto:name@me.com">Text</a> Linking to an e-mail address this way can actually be annoying from a user perspective as clicking it will open the default mail application on their computer. HTML Images The last tag we'll cover in this session is the image tag. It is used to instruct the web browser to present a picture on the screen. The image is stored on a server and is referenced like this: <img src="location_of_graphic_file" /> The image tag is an empty tag – it doesn't have an end tag. HTML Elements Just so you know... an HTML element is everything from the start tag to the end tag: Start tag | Element content | End tag Here are some examples of HTML elements: <p>This is a paragraph</p> <a href="default.htm" >This is a link</a> <br /> HTML Attributes HTML elements can have attributes. Attributes provide additional information about the element. Attributes are always specified in the start tag. They come in name/value pairs that look like this: name="value" HTML Attributes Example: HTML links are defined with the <a> tag. The link address is provided as an attribute: <a href="link.htm">Link</a> HTML Comments Comments can be inserted in the HTML code to make it more readable and understandable for someone looking at the code. Comments are ignored by the browser and are not displayed in the web browser. Comments are written like this: <!-- This is a comment --> End of Workshop More web workshops can be found at www.tinyurl.com/rpi123
