HTML How the Internet Works Client asks for an html file Server returns the html file Client parses and displays it This display is what most people consider a webpage What is HTML HTML stands for Hypertext Markup Language ID: 737743
Download Presentation The PPT/PDF document "Hypertext markup language" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Hypertext markup language
HTMLSlide2
How the Internet Works
Client asks for an html file
Server returns the html file
Client parses and displays it This display is what most people consider a webpage.Slide3
What is HTML?
HTML stands for Hypertext Markup Language
It’s used to make WebPages
HTML includes instructions that let you structure your pageSlide4
Web Pages
Here’s an example of a webpage made with the help of HTML.
Who knew HTML was so useful?Slide5
Tags
Instructions in HTML are called tags
This is what tags look like:
<description> This is an opening tag. It tells the browser where a section begins.</description> This tells a browser where a section ends.Slide6
What Every Page Should Look Like
<html>
<head>
<title> </title> </head>
<body>
</body>
</html>
What does it all mean??
HTMLSlide7
What It Means
<html> </html>
Tells the browser to interpret the text as html
<head></head> Tells your browser additional info about your page, we’ll tell you more a little later
<title></title>
Marks the title of the page
<body></body>
Marks the main content of the pageSlide8
Dreamweaver
Be sure to change to classic mode! That way, you can see the design of your page as well as the code.
Open Dreamweaver. Select “Classic” mode.
Create a new HTML by going to File->New->HTML.
This is the code of your web page.
This is the Properties bar. We’ll mostly be using it to edit images that we put on our page.
This is what your web page looks likeSlide9
Practice: Belle’s
Blog
Now we’re going to make a blog for one of our favorite Disney Princesses, Belle.
Open the file belle.html (it is in your Dreamweaver file).
Make
the title of the page
“Belle’s Blog” by either changing the title in the upper tool bar or by modifying the code.
Tip- You’ll notice that in the beginning of the code, there is a line that says “<title>
Unititled
Document</title>”- how can you alter it?
You need to practice if you want to learn anything!Slide10
More Elements
There are a lot more elements than the basic outline to determine more specifically, the structure of your page.
<p></p>
<img><a></a>
<
em
></
em
>
<q></q>
<blockquote></blockquote><br><h1></h1><h2></h2>
<ol></ol><li>And many moreLooks pretty boring- let’s fix it up!Slide11
Block and In-Line Elements
Before we start learning different elements, there’s 2 categories you need to know about
Block elements are for big blocks of things. Browsers will usually put a line-break before and after a block element.
In-Line elements are for things that don’t change the flow of the page at all, eg. if you want to add emphasis to a work inside a paragraph.
Wow, all those crazy tags are either Block or In-Line elements???Slide12
The Paragraph Element
<p> </p>
Use it to mark the beginning and end of a paragraph.
It’s a block elementTry separating out the last two paragraphs in Belle’s Blog by adding <p> to the beginning of a paragraph and </p> to the end
so that they look like the rest of her blog
The headers and each entry should all be separate paragraphs!
Open it in a browser and see what it looks like now
It should look more organizedSlide13
The Header Elements
<h1></h1>, <h2></h2> … <h6> </h6>
These are used to mark where the headings are
The browser will usually bold and enlarge theseThe higher the heading number, the smaller and less significant it’ll lookIt’s a block element
Belle didn’t know HTML when she wrote this- can you make her blog title, blog description and Entry Titles headings instead of paragraphs?
Tips: Replace <p> and </p> with <h1> and </h1> or <h3> and </h3>
Make her blog title h1 , her description h3, and her entry titles h2.
Why the heck do you want to learn HTML??Slide14
The Blockquote Element
<
blockquote
></blockquote>These are used when you have huge quotes that you want to separate from the rest of your text.They are block elements.
Mark the
quote in Belle’s first entry with
blockquote
elements and test it out.Slide15
Lists
There are 3 types of lists, ordered, unordered and definition lists
All three have their own start and end tags
Ordered and Unordered lists share the same content tags <li>So for every element of a Ordered and Unordered list do the following Example List
<li> dog </li>
<li> cat</li>
<li> hamster</li>
-Definition Lists are a little different, we’ll get to it in a secSlide16
Ordered Lists
<
ol
> </ol>Used to mark lists that are numbered1. food 2. cat 3.dog etc
Use <li> to mark each of the elements
In Entry 4, turn Belle’s list of characters she’s met into an ordered list!
Start by adding <
ol
> to the beginning of the list and </
ol
> to the end.Separate each name by typing <li> before each name and </li> after.
1
2
3Slide17
Unordered Lists
Unordered Lists are when you don’t need the elements numbered
<
ul></ul>As with ordered lists, make sure the elements between <ul
> and </
ul
> all have <li> and </li> surrounding them
Replace your ordered list with an
unordered
list from the last exerciseSlide18
Definition Lists
Definition Lists aren’t really lists
They are a series of terms, followed by explanations.
In html, they look like this<dl><dt
> Cookie </
dt
>
<
dd
> a yummy thing to eat </
dd></dl>The above example will end up looking somewhat like Cookie : a yummy thing to eatIn Entry 1, Belle gives a definition for Gaston. Help her format it!Slide19
Attributes
Some tags are a little more complicated
They hold more information about the element than regular <p>, <li>, <q>,
etc tags doThese pieces of information are called attributes
<hat color =
“
blue”>
You will always have a name of the attribute followed by a
value
in quotation marksSlide20
Font Style
To change the font, add <font…> to the beginning and </font> to the end.
When you type “<font” then space bar, options appear, such as color, size and style.
Make Belle’s blog look cooler by changing the color of the top header, “Belle’s Blog”!Don’t fool around with <font> too much; we’ll be teaching you CSS soon which is a better tool for altering the font.Slide21
Links
Links are inline and have attributes
<a
href = “…”> </a>href is an attribute that determines where the link goesTo link a word to brown’s website for example, do this:
<a
href
=“ http://www.brown.edu”> Brown website </a>
When you click “Brown” you’ll be sent to the brown website
Go to the last sentence of Belle’s last entry. Try
to link
“here” at the end of the page to the website she’s listed!NEVER FORGET THE “HTTP://” PARTYou can also link files locally without writing out their web address, we’ll talk more about this when we start to build websites with more than one page.Slide22
Adding Images
To add a picture to a website use the
img
element<img src = “where your picture is”>
The
img
tag requires the attribute
src
See that place in
Belle’s
Blog that tells you to insert a photo? Insert Belle’s picture by properly formatting the link she provided!Slide23
More on images
<
img
> is an inline elementThis means you can insert an image in the middle of a paragraph and it will not change the flowYou can link images the same way you link words<a
href
=“http
://
www.cs.brown.edu/orgs/
artemis
”>
<img src = “http://disney-clipart.com/Beauty-Beast/characters/belle4.gif”> </a> will link your picture of Belle to the Artemis website!Slide24
Even more on img
img
has another 2 attributes you might find useful
widthheightthe width and height of your image will be determined in pixelsso if you want an image 200 pixels by 200 pixels, then you type
<
img
src
= “blah.jpeg” width = “200px” height = “200px”>
Belle’s
picture is a little large. Use the width and height attribute to change the size towidth is 147height is 191Tip: If you insert a photo using Insert -> Image, you can see that the code for the height and width is already there!Slide25
One last tidbit- the breakline
Breakline
is used to add a line break (like when you hit enter or return in Word)
<br><br> has no closing tag, neither did image, why is that? (somebody please make a
guess)
Add two line breaks before and after Belle’s photo.Slide26
Empty Tags
Why do some tags not need closing tags?
Because they are empty tags, they don’t have any material
For example, the paragraph <p> has text between <p> and </p><p> Here’s some words</p>In the case of <br>, there’s nothing you need to put there. It’s just a line break
In the case of <img> the tag has an attribute to tell it to get an img but there’s also nothing else to go with it. It’s just going to insert a picture.Slide27
Big Picture
HTML is used to mark up the structure of your page
Think of it in blocks, you mark out your paragraphs
In the paragraphs you mark out your links and images and quotesCSS is very good for changing the fonts; although we have taught you in HTML, if you are interested in doing more work with formatting, you should try CSS! Visit our website for tutorials.Slide28
The End