Web Tags and vocabulary Open your notepad Open
Web Tags and vocabulary
Open your notepad++ Open index. html • Save the file with these file names: • Save as: in your root folder portfolio accessibility. html graphics. html javascript. html usability. html tools. html video. html
<!DOCTYPE html> specifies the version of HTML begin used
<html> begins and ends your webs page </html>
<head> The head provides information about the document, including the author, description, keywords, title, and other information. The head section is closed with the </head>
<title> You must give your document a title. This title doesn't actually appear within the web page, but appears in the title bar of the browser window. This is also the title of the page that will be displayed by default in search engine results or in user's Favorites. The title is closed with </title>
<meta> is a tag that has many purposes, depending on what attribute it has. In our "bare bones" document, the attribute ischarset, which is set to "utf -8". This is a required tag, which tells the browser which character set the web page is encoded in. There are many possible character sets, but "utf-8" is an international character set that is one of the most common. The <meta> tag is not a container tag. Therefore, it has no corresponding closing tag.
<body> all web page content goes there </body>
<h 1>This is heading 1</h 1> <h 2>This is heading 2</h 2> <h 3>This is heading 3</h 3> <h 4>This is heading 4</h 4> <h 5>This is heading 5</h 5> <h 6>This is heading 6</h 6>
paragraph <p> paragraph – this will word wrap your text like a paragraph with a blank line before and after </p>
<div> breaks code into sections </div>
<main> The purpose of the <main>element is to provide a container for all the main content of the page. before the ending body tag < /main>
Open Notepad++ from the Programming folder Save the file in the Portfolio folder as index. html • Type the following in to the document:
Add the following code to index. html <!DOCTYPE html> <head> <meta charset="utf-8"> <title>Web Portfolio: Your Name</title> </head> <body> <!-- The content of your web page will go here --> <h 1>Web Portfolio</h 1> <div> Your Name <br/> gchapman@henry. k 12. ga. us<br/> </div> <div> Intro to Digital Technology<br/> Luella High School<br/> 4 th Period<br/> School year 2014 -2015<br/> </div> <nav> Home</br/> Assessiblity<br/> Usability<br/> Graphics<br/> Javascript<br/> Tools<br/> Video<br/> </nav> (Bolded part)
Now add this next. (Bolded part) Save and run in google chrome. <main> <p>This web portfolio includes examples of my work in Mrs. Chapman's Intro to Digitals Technology class. It also includes my reflections (below) on what I learned in each unit of the course. </p> <h 2>Unit 2</h 2> <p>This section will include links to my work for this unit, once completed. </p> <h 2>Unit 3</h 2> <p>This section will include links to my work for this unit, once completed. </p> <h 2>Unit 4</h 2> <p>This section will include links to my work for this unit, once completed. </p> <h 2>Unit 5</h 2> <p>This section will include links to my work for this unit, once completed. </p> <h 2>Unit 6</h 2> <p>This section will include links to my work for this unit, once completed. </p> </main> </body> </html>
- Slides: 15