WICS Web Project Creating your website and learning

WICS Web Project Creating your website and learning HTML

Creating Your Web space • Follow the tutorial on http: //www. ics. uci. edu/~sosar/ web_tutorial/

Check out your website www. ics. uci. edu/~UCInet. ID/

Accessing your web site files • Follow tutorial on http: //www. ics. uci. edu/~sosar/ ftp/

HTML? • Hyper Text Markup Language • Describes web pages. • A markup language is a set of markup tags • < tag > • Tags describe document content • Paragraphs • Images • Links

HTML Example <!DOCTYPE html>  <html> <head> <title>Window Title</title> </head> <body> <h 1>My First Heading</h 1> <p>My first paragraph. </p> </body> </html> • The DOCTYPE declaration defines the document type • The text between <html> and </html> describes the web page • The text between <body> and </body> is the visible page content • The text between <h 1> and </h 1> is displayed as a heading • The text between <p> and </p> is displayed as a paragraph

More on the <head> tag • Contains metadata not displayed on the page • Define keywords for search engines <meta name="description" content="Free Web tutorials on HTML and CSS"> • Define the author of a page <meta name="author" content="Hege Refsnes"> • Link to cascading style sheets (CSS) <link rel=“stylesheet” type="text/css“ href=“style. css” > • Link to Java. Script files <script src=“javascript. js”></script>

Other useful tags • Adding images <img src = “image_file”> • Links <a href = “www. yoursite. com”>Visible text</a> • Making lists Bullet Points <ul> <li>Item</li> </ul> Numbered <ol> <li>Item</li> </ol>

Where to edit HTML • Notepad++ http: //notepad-plus. org/ SAVE AS. HTML

Learn more on… http: //www. w 3 schools. com/html/