Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations


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:

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 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?

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: “ 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

6 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

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 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!

8 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

9 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: )

10 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!

11 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

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:  Link Name

13 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!

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)


Download ppt "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."

Similar presentations


Ads by Google