Hypertext markup language

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

 HTML stands for Hypertext Markup Language  It’s used to make WebPages  HTML includes instructions that let you structure your page

Here’s an example of a webpage made with the help of HTML. Who knew HTML was so useful?

 Instructions in HTML are called tags  This is what tags look like:   This is an opening tag. It tells the browser where a section begins.   This tells a browser where a section ends.

What does it all mean?? HTML

  Tells the browser to interpret the text as html   Tells your browser additional info about your page, we’ll tell you more a little later   Marks the title of the page   Marks the main content of the page

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 like

 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 “ Unititled Document ”- how can you alter it? You need to practice if you want to learn anything!

 There are a lot more elements than the basic outline to determine more specifically, the structure of your page.   And many more Looks pretty boring- let’s fix it up!

 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???

  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 to the beginning of a paragraph and 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

, …  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 and with and or and  Make her blog title h1, her description h3, and her entry titles h2. Why the heck do you want to learn HTML??

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

 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  So for every element of a Ordered and Unordered list do the following Example List dog cat hamster -Definition Lists are a little different, we’ll get to it in a sec

  Used to mark lists that are numbered  1. food 2. cat 3.dog etc  Use 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 to the beginning of the list and to the end.  Separate each name by typing before each name and after

 Unordered Lists are when you don’t need the elements numbered   As with ordered lists, make sure the elements between and all have and surrounding them  Replace your ordered list with an unordered list from the last exercise

 Definition Lists aren’t really lists  They are a series of terms, followed by explanations.  In html, they look like this Cookie a yummy thing to eat  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!

 Some tags are a little more complicated  They hold more information about the element than regular,,, etc tags do  These pieces of information are called attributes You will always have a name of the attribute followed by a value in quotation marks

 To change the font, add to the beginning and 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 too much; we’ll be teaching you CSS soon which is a better tool for altering the font.

 Links are inline and have attributes   href is an attribute that determines where the link goes  To link a word to brown’s website for example, do this:  Brown website  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 “ 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.

 To add a picture to a website use the img element   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!

 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  will link your picture of Belle to the Artemis website!

 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  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!

 Breakline is used to add a line break (like when you hit enter or return in Word)   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.

 Why do some tags not need closing tags?  Because they are empty tags, they don’t have any material  For example, the paragraph has text between and  Here’s some words  In the case of, there’s nothing you need to put there. It’s just a line break  In the case of 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.

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