1 / 15

HTML

HTML. What is html?. HyperText Markup Language We use HTML to create web pages and other information that can be displayed in a web browser Uses tags to annotate the information in a document Indicates how information should be displayed – i.e. paragraphs, lists, etc. Basics of writing html.

joelle
Download Presentation

HTML

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

  2. What is html? • HyperText Markup Language • We use HTML to create web pages and other information that can be displayed in a web browser • Uses tags to annotate the information in a document • Indicates how information should be displayed – i.e. paragraphs, lists, etc.

  3. Basics of writing html • We will be using Notepad++ to write HTML • White space: anywhere you do not have HTML. White space will NOT affect your code. • Useful for keeping your code neat and readable

  4. Two identical codes <h1>Artemis Project 2013</h1><p>Artemis is a program for rising 9th grade girls focused on computer science and engineering. We go on field trips every Friday.</p><p><a href=“http://www.bu.edu/lernet/artemis”>This website</a> gives more information about Artemis.</p><p>Click on the screenshot below to see a REALLY COOL video!<br /><a href=“http://youtu.be/0kDuTxh1Ovc”><imgsrc=“artemislogojpg”></a></p> <h1>Artemis Project 2013</h1> <p> Artemis is a program for rising 9th grade girls focused on computer science and engineering. We go on field trips every Friday. </p> <p> <a href=“http://www;bu.edu/lernet/artemis”>This website</a> gives more information about Artemis. </p> <p> Click on the screenshot below to see a REALLY COOL video! <br/> <a href=“http://youtu.be/0kDuTxh1Ovc”><imgsrc=“artemislogo.jpg”></a> </p> Which do you think looks better? Why?

  5. How do tags work? • In most cases, tags come in pairs: a start tag and a stop tag • Text will go in between these pairs of tags • Example: “<b>This text is bold,</b> but this text is not.” will print out “This text is bold, but this text is not.” • Usually an end tag is the same as the start tag, but with a forward slash (/) at the beginning

  6. Unpaired tags • Some commands require only one tag • Examples: • <br/> forms a line break. Same as pressing enter on your keyboard • <imgsrc=“logo.jpg” /> inserts an image (named logo.jpg) into your webpage • The image (logo.jpg) MUST be in the same folder where your HTML file is, or it won’t be able to find it! • Can also insert an image from a URL – more about that later

  7. practice • First, make a folder on your Desktop. Label it “Website”. This is where we’ll store your files! • Open up Notepad++, hit “Save As…”, and save it with a .html extension. Save it in your “Website” folder! • Type <html> in your first line, press enter a couple times, then type </html> • Signifies the beginning and end of your HTML document! • Your code MUST be between <html> and </html>. Anything outside these will not work!

  8. practice • Type in <body>, press enter a couple times, then type </body> • This is the body of your webpage • Let’s make a heading! Type in <h1>, insert a header, then type </h1> • Make sure your header is between <body> and </body> • Press enter, type <p> followed by any sentence, type in </p>, and press enter again

  9. Important tags to begin • Formatting • <p></p> - types in a paragraph • <br/> - a line break • <b></b> - bold • <i></i> - italics • <u></u> - underlined • <center></center> • <font color=“COLOR”></font> • Replace COLOR with a color name or hexadecimal code • <font size=“SIZE”></font> • Replace SIZE with a number from 1-7 (Fun fact: you could combine color/size together like so: <font color=“NAME” size=“SIZE”></font>) • Layout • <html> and </html> • Signifies beginning/end of an HTML document • <body> and </body> • Everything within these tags are considered the body of your webpage • <h1> and </h1> • Signifies the largest header • <h2> and </h2> • Signifies the second largest header • <h3> and </h3> • Signifies the third largest header (You get the idea, right?)

  10. lists • To create an ordered list: <p> Morning Schedule </p> <ol> <li>Wake up</li> <li>Brush teeth</li> <li>Eat breakfast</li> <li>Go to Artemis!</li> </ol> • To create an unordered list: <p> Artemis 2013 Coordinators </p> <ul> <li>Anie</li> <li>Bukky</li> <li>Jessi</li> <li>Lauren</li> </ul>

  11. Images and links • Inserting Links and Images • <a href=“http://www.google.com”>Your Text Here</a> • Will give you a Your Text Herewith a link to www.google.com • <imgsrc=“sphere.jpg”> • Your image (in this case sphere.jpg) MUST be in the same folder where your HTML file is located! • <imgsrc=“http://www.animage.com/myimage”> • Directly insert an image from online. Right click an image from a webpage to retrieve its URL • To make an image clickable (i.e. turn an image into a link), simply insert the image HTML code between the <a></a> codes • Example: <a href=“http://www.google.com”><imgsrc=“googlelogo.jpg”></a> • If this was in a code, clicking the image above will lead you to the Google website • Anything you put between <a></a> will become clickable!

  12. Link pages together • Now you should have your first webpage. But what if you want to make more to create a website? • Open a new Notepad++ file, hit “Save As…”, and name your file. Make sure the extension is .html! • SAVE YOUR FILE IN THE “WEBSITE” FOLDER!! • In the location where you want your link to the second page, type: • <a href=“SECONDPAGE.html”>Link Name</a>

  13. Need more help? • Go to http://www.bu.edu/lernet/artemis/years/2011/students.html • The girls from 2011 made their own HTML websites. Click on their websites for some ideas – they have some more interesting tricks than just the basics listed here • Go to http://www.bu.edu/lernet/artemis/resources.html • Check out the HTML/CSS section – there are some links to some great HTML tutorial websites!

  14. Your turn! • Your website must have at least 5 webpages (including the homepage) • Try to make each webpage about something different • For example, my homepage could have some basic information about myself (name, age, birthdate). Other pages can be about my family, favorite music, hobbies, fun facts, what I want to be when I grow up, websites I like to go on for fun. • Keep everything PG, please!

  15. requirements • Your website must have: • 5 web pages (including the home page) • 3 links (besides the other web pages) • 1 picture link (click the picture to go to a new link) • 5 pictures • 2 lists: 1unordered and 1ordered • Extra challenge: Youtube video (embedded)

More Related