lesson 2 – unit b. quick review 1. what is the name of the egcc host that you ftp your files? 2....
DESCRIPTION
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?TRANSCRIPT
Lesson 2 – Unit B
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?
Project 1 – due at 11:59 pm Two parts to this project. Practice work from textbook – uploaded to the unit folder that is directly under the lesson1 folder. 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/~abc1234677/lesson1
“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
HypertextMarkupLanguage
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.Add <meta charset=“utf-8”/> to specify character encoding.
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
HTMLComments<!-- some text or code -->
<!- some codesome 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.
Web page validation. Can be used to detect errors in code. Errors should be corrected. Warnings and informational messages http://validator.w3.org/
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 ThumbDo 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
Just a reminderIn Lesson 2 practice work from the textbook you are creating the web page files – there are no files in the Unit B folder.
