1 / 28

Hypertext markup language

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

chase
Download Presentation

Hypertext markup language

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Hypertext markup language

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

  3. What is HTML? • HTML stands for Hypertext Markup Language • It’s used to make WebPages • HTML includes instructions that let you structure your page

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

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

  6. What Every Page Should Look Like <html> <head> <title> </title> </head> <body> </body> </html> What does it all mean?? HTML

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

  8. 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 what your web page looks like This is the Properties bar. We’ll mostly be using it to edit images that we put on our page.

  9. 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!

  10. 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!

  11. 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???

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

  13. The Header Elements Why the heck do you want to learn HTML?? • <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.

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

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

  16. 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. 2 3 1

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

  18. 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!

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

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

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

  22. Adding Images • To add a picture to a website use the img element • <imgsrc = “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!

  23. 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”> <imgsrc = “http://disney-clipart.com/Beauty-Beast/characters/belle4.gif”> </a> will link your picture of Belle to the Artemis website!

  24. 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 <imgsrc= “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!

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

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

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

  28. The End

More Related