2. INTRODUCTION TO BASIC HTML Exploring Computer Science – Lesson 3-2

3. OBJECTIVES The student will be able to:  Create a storyboard  Navigate an html editor.  Create an html page with a title and a body.  Create an html page with paragraph tags, headings, line breaks, horizontal lines and lists.

4. STORYBOARDS  A storyboard is a visual plan for a website. It usually consists of a series of pages that include a rough sketch outlining the content, navigation, and design elements of the website.

5. STORYBOARD  Create a storyboard for a website that includes a title, several paragraphs, and headings for each paragraph.  Somewhere on your web page include two lists.  Can be any topic but must be school appropriate!  You have 15 minutes. Title Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Heading 2 Atqui reperies, inquit, in hoc quidem pertinacem; Duo Reges: constructio interrete. Nescio quo modo praetervolavit oratio. Non semper, inquam; Disserendi artem nullam habuit. Ergo hoc quidem apparet, nos ad agendum natos. Hic ego: Etsi facit hic quidem, inquam tua est. At, illa, ut vobis placet, partem quandam tuetur. Existimas, apud quos turpiter loquare? End

6. HTML  Web pages are just plain text. You can view or edit the source code using any text editor.  "Tags" provide web browsers with instructions about the web page, such as where to display images, and how the document is structured.  Tags are always enclosed in angle brackets:.

7. HTML  Tags are comprised of elements and attributes. An element is an object on a page (such as a heading, paragraph, or image), and attributes are qualities that describe that element (such as width and height).  Tags usually travel in pairs. An opening tag begins a section of page content, and a closing tag ends it. For example, to markup a section of text as a paragraph, you would open the paragraph with an opening paragraph tag and close it with a closing paragraph tag (closing tags always proceed the element with a / ).

8. HTML  A few tags are called non-container tags, because they don't contain any content - they stand alone. Examples are images and line breaks. XHTML is more strict than HTML, and requires that all open tags must be closed, even if they're not container tags. Therefore, non-container tags end in />. For example, the tag for a line break is. HTML does not have this same requirement, but it's a good habit to get into in case you ever need to code in XHTML.  Tags in HTML are not case sensitive, but in XHTML all tags must be in lower case. Even when coding in HTML, you should get in the habit of writing tags in lower case.

9. HTML  White space is ignored by web browsers. So, if you hit the space bar multiple times within a document, only one of those spaces will actually be displayed by the browser.  Tags can be nested. For example, This paragraph is nested inside a division. Note that the order of nested tags is important: The container tags surrounding any content should be symmetrical.

10. NOTEPAD++  The editor we will be using for HTML code is Notepad++  It’s this icon on the screen.  Once a file is saved as an HTML file (.html), Notepad will color code items to make things easier to debug.

11. HTML TAGS - DOCUMENT STRUCTURE Opening TagClosing TagDescription Identifies the document as HTML. Identifies the header section of your document, which is used to provide information about the document for use primarily by search engines and browsers. The title of document. This element must be nested within the head elements. Contains all the visible content of a web page.

12. CREATE YOUR FIRST WEB PAGE First Web Page Some text goes here. This will show on the screen

13. CREATE YOUR FIRST WEB PAGE  Create a file with all the tags you see on the previous slide,  In the body section of your web page create a heading and a paragraph on your topic.  Save the file (make sure you add.html at the end of the file name.  Open your web page in a browser  Fix any problems you see!  You have 5 minutes End

14. CREATE YOUR FIRST WEB PAGE  Continue your web page. Add a couple more paragraphs and your lists.  Save the file and open it as a web page.  How does it look?  You have 5 minutes End

15. HTML TAGS  HTML uses tags to control the layout on the page.

16. HTML TAGS - CONTENT (CONTAINER) TAGS Opening TagClosing TagDescription to Headings. is the main heading, is secondary, etc. New paragraph. Makes ordered lists. Makes unordered (or bulleted) lists. Marks items in either the ordered or unordered list.

17. CREATE YOUR FIRST WEB PAGE Reflection Unit 2 This is where you include your first reflection. The reflection has to include either a ordered list or an unordered list. The questions that need to be addressed in the reflection are: What did you learn? How do you know you learned it? Reflections will be written at the end of each Unit and will be part of the index.html file. Reflections will be 10% of your grade.

18. HTML TAGS  Use the HTML tags to fix up your web page. Can you make it look as you expect?  You have 10 minutes End

19. HTML NON-CONTAINER TAGS  There are some tags that you close at the same time as you open them. These are called non-container tags and the / is moved to the end.

20. HTML TAGS - CONTENT (NON-CONTAINER) TAGS Opening TagDescription Causes a line break. It may be repeated for multiple line breaks. Defines a horizontal line (draws a line across the page)

21. WEB RESOURCE FOR HTML (AND CSS)  A great resource for HTML and CSS is w3schools  Look at http://www.w3schools.com/ - Bookmark this site!http://www.w3schools.com/

22. REST OF TODAY  Complete coding the web page you drew at the beginning of class.  Use all the HTML tags that you learned in class today.  Print out your web page, staple it to you storyboard and turn in before you leave today.