hypertext markup language
DESCRIPTION
HTML. Hypertext markup language. 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 It’s used to make WebPages - PowerPoint PPT PresentationTRANSCRIPT
Hypertext markup language
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
It’s used to make WebPages
HTML includes instructions that let you structure your page
Web Pages
Here’s an example of a
webpage made with the
help of HTML.
Who knew HTML was so useful?
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.
What Every Page Should Look Like
<html><head>
<title> </title></head><body></body>
</html>
What does it all mean??
HTML
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 page
DreamweaverBe 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 like
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!
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 more
Looks pretty boring- let’s fix it up!
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???
The Paragraph Element
<p> </p> Use it to mark the beginning and
end of a paragraph. It’s a block element Try 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 organized
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 these The higher the heading number,
the smaller and less significant it’ll look
It’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??
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.
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 sec
Ordered Lists <ol> </ol> Used to mark lists that are numbered 1. 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 3
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 exercise
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 eat
In Entry 1, Belle gives a definition for Gaston. Help her format it!
Attributes
Some tags are a little more complicated They hold more
information about the element than regular <p>, <li>, <q>, etc tags do
These pieces of information are called attributes
<hat color = “ blue”>• You will always have a
name of the attribute followed by a value in quotation marks
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.
Links Links are inline and have attributes <a href = “…”> </a> href is an attribute that determines where the
link goes To 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://” PART
You 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.
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!
More on images
<img> is an inline element This means you can insert an image in the
middle of a paragraph and it will not change the flow
You 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!
Even more on img
img has another 2 attributes you might find useful width height
the width and height of your image will be determined in pixels so 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 to width is 147 height is 191
Tip: If you insert a photo using Insert -> Image, you can see that the code for the height and width is already there!
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.
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.
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 quotes CSS 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.
The End