2 What is html? HyperText Markup Language We use HTML to create web pages and other information that can be displayed in a web browserUses tags to annotate the information in a documentIndicates how information should be displayed – i.e. paragraphs, lists, etc.<p> paragraph, <li> 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 readableAny text editing program is good – textwrangler is my favorite for macs, or textedit
4 Two identical codes Which do you think looks better? Why? <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> <a href=“http://www;bu.edu/lernet/artemis”>This website</a> gives more information about Artemis. Click on the screenshot below to see a REALLY COOL video! <br /> <a href=“http://youtu.be/0kDuTxh1Ovc”><img src=“artemislogo.jpg”></a><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”><img src=“artemislogojpg”></a></p>Which do you think looks better? Why?Make sure you note that whitespace does NOT affect – like when you push enterKeep your HTML neat! The last thing you want to do is spend a lot of time trying to read through the code you have written
5 How do tags work?In most cases, tags come in pairs: a start tag and a stop tagText will go in between these pairs of tagsExample: “<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<img src=“logo.jpg” /> inserts an image (named logo.jpg) into your webpageThe 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 practiceFirst, 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 practiceType in <body>, press enter a couple times, then type </body>This is the body of your webpageLet’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<p> will be important later once we start CSSA little confusing – you don’t have to type <p> words </p> to type things, but it’s a good idea to understand what it does
9 Important tags to begin 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?)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>)Size can ONLY be from 1-7
10 lists To create an unordered list: <p> Artemis 2013 Coordinators <ul><li>Anie</li><li>Bukky</li><li>Jessi</li><li>Lauren</li></ul>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>
11 Images and links Inserting Links and Images <a href=“http://www.google.com”>Your Text Here</a>Will give you a Your Text Here with a link to<img src=“sphere.jpg”>Your image (in this case sphere.jpg) MUST be in the same folder where your HTML file is located!<img src=“http://www.animage.com/myimage ”>Directly insert an image from online. Right click an image from a webpage to retrieve its URLTo make an image clickable (i.e. turn an image into a link), simply insert the image HTML code between the <a></a> codesExample: <a href=“http://www.google.com”><img src=“googlelogo.jpg”></a>If this was in a code, clicking the image above will lead you to the Google websiteAnything you put between <a></a> will become clickable!Note target=“new”
12 Link pages togetherNow 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 nts.htmlThe 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 hereGo toCheck 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 differentFor 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 pictures2 lists: 1unordered and 1orderedExtra challenge: Youtube video (embedded)