File Naming and Coding

Size: px

Start display at page:

Download "File Naming and Coding"

Betty Lamb
7 years ago
Views:

1 File Naming and Coding

2 What is the file name of the first page of a website?

3 index.html

4 What are best practices for naming files?

5 naming conventions File names: No spaces, 8 characters or less, 3 or 4 letter extension (try using simple, one word names, all lower case, use dashes to separate words) index.html index 2.html index-2.html index.html is almost always the name for the first page of a site This page loads automatically... when graphictactics.com loads graphictactics.com/index.html Best practice for multiple words is a dash (fast-cars.html) or underscore (summer_flowers.html)

6 Languages of the Web <center></center> <img src=pict> <a href></a> <center></center> HTML <head></head> CSS <title></title> Explorer <br /> Javascript <body text= # >

7 HTML-Content (what we see and read) CSS-Presentation (how it looks) Javascript-Interaction and Behavior

8 HTML5 What s all the fuss about?

9 html tags (also called elements) <html> <head> <title>my first page</title> </head> <body> <p>this is my first paragraph.</p> </body> </html> The browser reads and displays the html from the top to bottom of the.html file The content is displayed in the order read by the browser Spaces, tabs and returns are read as one space (unless you use the <pre> tag) To get space around your html elements, use styles (css)

10 anatomy of a html element bracket symbols bracket symbols with closing fwd slash <title>hello Cruel World</title> opening tag name content closing tag name

11 common tags structural-block level tags <title> <header> <section> <article> <aside> <nav> <footer> <h1-h6> <p> <br /> <ul> <ol> <li> <hr /> <div> important phrasing content tags Text center and font are no longer considered valid code. Do not use them <em> <strong> <blockquote> <a href= ucdavis.edu target= _blank > <span>

12 html guidelines + rules #1. html tags should be written in lowercase <title>my first page</title>

13 html guidelines + rules #2. All tags should have a closing tag <html> <head> <title>my first page</title> </head> <body> <p>this is my first paragraph.</p> </body> </html>

14 html guidelines + rules #3. Some tags are self-closing, also called void or empty <img src= images/block.gif > <br /> <hr />

15 html guidelines + rules #4. Some tags have attributes and all attributes should have values. All values *should* have quotations. <a href= nextpage.html >next page</a> tag attribute value content closing tag

16 html guidelines + rules #5. Additional attributes can be added and they must be separated by one space <a href= nextpage.html target= top >next page</a> attribute value attribute value Spaces, tabs and returns are read as one space...

17 html guidelines + rules #6. All tags are defined as either phrasing (inline) or structural (block) phrasing tags occur within the flow of the block (think emphasis, strong, code) structural (block) tags have a break above and below (think header, footer, section, nav, paragraph, blockquote, h1-h6, list item)

18 html guidelines + rules #7. Phrasing content tags cannot contain structural level tags <em><p>this is wrong</p></em> <p><em>this is right</em></p>

19 html guidelines + rules #8. Tags must be properly nested (think parent/child) Correct: <p><strong>blah blah blah</strong></p> Incorrect: <p><strong>blah blah blah</p></strong>

20 code format > indentation <html> <head> <title>my web page</title> </head> <body> <h1>welcome</h1> </body> </html>

21 DOCTYPE, namespace and charset xhtml <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> html5 <DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

22 comments <--This text will be ignored by the browser--> <--It's a way for you to label major sections of your document or leave a question for colleagues (or teachers)--> <--==========================begin content--> <section id="main"> <p>this is my first paragraph</p> </section> <--==========================end content-->

23 We ll be adding some simple styles (it s css) Here s a simple inline style that defines background color and font family for content inside the body tag. <body style="background: red; font-family: verdana;">

24 The goal of html is markup...think lean and mean (or keep it simple, sweetie) let s code

How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (

How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook ( CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of