Presentation on theme: "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."— Presentation transcript:
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 Artemis Project 2013 Artemis is a program for rising 9 th grade girls focused on computer science and engineering. We go on field trips every Friday. This website gives more information about Artemis. Click on the screenshot below to see a REALLY COOL video! Artemis Project 2013 Artemis is a program for rising 9 th grade girls focused on computer science and engineering. We go on field trips every Friday. This website gives more information about Artemis. Click on the screenshot below to see a REALLY COOL video! 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: “ This text is bold, 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: forms a line break. Same as pressing enter on your keyboard 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 in your first line, press enter a couple times, then type Signifies the beginning and end of your HTML document! Your code MUST be between and. Anything outside these will not work!
PRACTICE Type in, press enter a couple times, then type This is the body of your webpage Let’s make a heading! Type in, insert a header, then type Make sure your header is between and Press enter, type followed by any sentence, type in, and press enter again
IMPORTANT TAGS TO BEGIN Layout and Signifies beginning/end of an HTML document and Everything within these tags are considered the body of your webpage and Signifies the largest header and Signifies the second largest header and Signifies the third largest header (You get the idea, right?) Formatting - types in a paragraph - a line break - bold - italics - underlined Replace COLOR with a color name or hexadecimal code Replace SIZE with a number from 1-7 (Fun fact: you could combine color/size together like so: )
LISTS To create an unordered list: Artemis 2013 Coordinators Anie Bukky Jessi Lauren To create an ordered list: Morning Schedule Wake up Brush teeth Eat breakfast Go to Artemis!
IMAGES AND LINKS To make an image clickable (i.e. turn an image into a link), simply insert the image HTML code between the codes Example: If this was in a code, clicking the image above will lead you to the Google website Anything you put between will become clickable! Inserting Links and Images Your Text Here Will give you a Your Text Here with a link to www.google.com Your image (in this case sphere.jpg) MUST be in the same folder where your HTML file is located! Directly insert an image from online. Right click an image from a webpage to retrieve its URL
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: Link Name
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)