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. <p> paragraph, <li> lists, etc
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 Any text editing program is good – textwrangler is my favorite for macs, or textedit
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 enter Keep 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
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
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 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
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!
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 <p> will be important later once we start CSS A 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
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
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>
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 www.google.com <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 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”><img src=“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! Note target=“new”
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>
Need more help? Go to http://www.bu.edu/lernet/artemis/years/2011/stude nts.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!
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!
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)