PowerPoint slideshow Cooking Healthy for the Holidays Slideshow
Intro to HTML Workshop. Welcome This slideshow presentation is designed to introduce you to the...
25
Intro to HTML Workshop
-
date post
15-Jan-2016 -
Category
Documents
-
view
218 -
download
0
Transcript of Intro to HTML Workshop. Welcome This slideshow presentation is designed to introduce you to the...
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 handyreference sheet for all themarkup you will be learning,check out this cheat sheet(also available as a pdf).
HTML Exploring
Let's roll up oursleeves and dabblea bit. First, we aregoing to create anHTML document.
Follow this link andcopy the code toyour computer'sclipboard.
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:[email protected]">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 atwww.tinyurl.com/rpi123
