HTML 2013 Powerpoint
advertisement
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 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 TWO IDENTICAL CODES <h1>Artemis Project 2013</h1> <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 Artemis is a program for rising 9th grade girls focused on computer science and engineering. We go on field trips every Friday. trips every Friday.</p><p><a href=“http://www.bu.edu/lernet/artemis”>This </p> website</a> gives more information about Artemis.</p><p>Click on the screenshot below <p> to see a REALLY COOL video!<br /><a <a href=“http://www;bu.edu/lernet/artemis”>This website</a> href=“http://youtu.be/0kDuTxh1Ovc”><img gives more information about Artemis. src=“artemislogojpg”></a></p> </p> <p> <p> Click on the screenshot below to see a REALLY COOL video! <br /> <a href=“http://youtu.be/0kDuTxh1Ovc”><img src=“artemislogo.jpg”></a> </p> Which do you think looks better? Why? 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 IMPORTANT TAGS TO BEGIN Formatting 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?) <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>) LISTS To create an unordered list: To create an ordered list: <p> <p> Artemis 2013 Coordinators Morning Schedule </p> </p> <ul> <ol> <li>Anie</li> <li>Wake up</li> <li>Bukky</li> <li>Brush teeth</li> <li>Jessi</li> <li>Eat breakfast</li> <li>Lauren</li> <li>Go to Artemis!</li> </ul> </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 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> <img src=“sphere.jpg”> Your image (in this case sphere.jpg) MUST be in the same folder where your HTML file is located! <img If this was in a code, clicking the image above will lead you to the Google website src=“http://www.animage.com/myimage Anything you put between ”> Directly insert an image from online. Right click an image from a webpage to retrieve its URL <a></a> will become clickable! 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)
