Unit A
Project 1 Getting Started – due before 11:59 pm Two parts to this project. Practice work – me.txt Project work – two files that are uploaded to the project folder that is directly under the lesson1 folder. Info.txt – text file edited in notepad Project1.docx – screen capture In Canvas you submit the URL for the location in your eGCC account where these files are located i.e. http://web.gccaz.edu/~abc123467/lesson1
Which of these would be the correct URL for user xyz7654321 for lesson1? http://myfiles.gccaz.edu/~xyz7654321/lesson1 ftp address http://www.gccaz.edu/~xyz7654321/lesson1 not www but web http://web.gccaz.edu/~xyz7654321/public.www/lesson1 Do not add public.www http://web.gccaz.edu/~xyz7654321/lesson 1 Do not put spaces in file or folder names http://web.gccaz.edu/~xyz7654321/lesson1 CORRECT
“The only thing constant is change.” The World Wide Web Consortium (W3C) maintains HTML standards and those standards are constantly "under transformation". HTML5 and CSS3 are the current standards. Deprecated features can still be used but their use is not recommended. Obsolete features should never be used.
Two Languages – two purposes HTML IS A SEMANTIC LANGUAGE STRUCTURE CSS IS A PRESENTATION LANGUAGE APPEARANCE
Hypertext Markup Language HTML is a mark up language that marks up text with tags. Web pages consists only of text and tags and therefore should only be created and edited with a text editor.
What you code. What the browser renders
HOW HTML TAGS MARK UP ELEMENTS Normal tags (Chop sticks) <p>A journey of a thousand web pages begins with a single click.</p> Opening tag <tag> Closing tag </tag> One sided tags (fork) <p>A journey of a thousand web pages begins with a single click.</p> <br />Anonymous Just one tag without end tag.
Common Questions Are tags case sensitive? Should I use UPPER CASE, lower case or Mixed Case? Does code need to be spaced in a certain amount? Does code need to be written on separate lines? Can I use Word to write my web pages? Well can I use Dreamweaver or a similar development tool to write my web pages? What is the web developer mantra?
After you edit a page in notepad what should you do? Save the file. When you view a page in the browser since it has changed, what should you do? Refresh or Reload the page. “Save and Refresh”.
Using your text editor (Notepad), start with the DOCTYPE tag then add the html tags.
Add <head> and </head> tags in new lines within the html tags. Add <body> and </body> tags in new lines within the html tags.
title - <title> and </title> The text that is enclosed in the begin and end title tags will appear in the tab or window of the browser. The title tag should always be in the head section not in the body. It also will be used if a page is bookmarked or made a favorite. heading - <hn> and </hn> - where n is a number from 1 to 6 Headings come in various sizes with the largest being an h1 and the smallest being the h6. An h3 tag is often called a medium size heading. Examine the code and its result below to see how these tags are coded and their results. paragraph - <p> and </p> The text enclosed inside the paragraph tags will wrap as one item as the browser window's size changes. break - <br /> The break tag will cause the next item to start on a new line. The paragraph tag inserts a blank line where the break tag does not.
<title> and </title>: text that appears in the browser’s title bar <h1> and </h1>: highest level heading <p> and </p>: paragraph of text
HTML Comments <. -- some text or code --> < HTML Comments <!-- some text or code --> <!-- some code some more code even more --> Comments do not appear when the page is displayed in the browser. Can be used to document code. Portions of code being developed can be commented until completed. Useful when testing code.
If you have challenges Double check Incorrect tags Missing end tag Speeling Missing or incorrect quotes - “ is not the same as Validate Upload all the files and then send an email with the published address to the instructor including a meaningful description of the difficulty. Do not submit in Canvas until it is to be graded.
R.O.T. – Rules Of Thumb TEST, TEST, TEST Do not put spaces in file names or folder names. Be careful with quotes – always finish what you start. ONLY update the files on your USB. Make a backup copy of your USB. Once updates have been made to the files on your USB, then publish them to your eGCC web space. Always use the html extension. TEST, TEST, TEST
The two possibilities but three possible results A web site has a page named index.htm or index.html Result: The web page is displayed This is why one often enters just the name of the host i.e. www.cnn.com Try: http://web.gccaz.edu/~timgo00001/ A web site DOES NOT have a page named index.htm or index.html Results Either an error message OR a directory listing. Try: http://web.gccaz.edu/~timgo00001/cis133DA Try: http://web.gccaz.edu/~timgo00001/cis133/
Quick review 1. What is the name of the eGCC host that you ftp your files? 2. What type of software do you use to create and edit web pages? 3. What type of software do you use to view web pages? 4. What type of software do you use to publish web pages? 5. What is the name of the folder in your eGCC account where you will have any web pages and folders that contain web pages? 6. What is the location that you will store your original files?
Quick review continued 7. What type of files are web pages? 8. What is the URL that you and others would use to view the folder that contains your files for lesson1? 9. If a web folder does NOT have a page named index.htm or index.html, what will the browser display? 10. What is the easiest way to enter your URL into Canvas? 11. Once you have published you work and before you submit the URL in Canvas, what should you do?
Quick review continued 12. What should be the very first tag in you web page file? 13. What tag should come immediately after the doctype tag? 14. What should be the last tag in a web page? 15. What are the two major sections for a web page? 16. What tag is used to make text bold and a certain size? 17. What tag is used to make text a title of a web page? Where should this tag be placed? 18. How are comments indicated in a web page?
Now lets take a look at the practice for Unit A and then at Project A.