Unit A.

Slides:



Advertisements
Similar presentations
HTML Basics Customizing your site using the basics of HTML.
Advertisements

Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
Unit 3 Day 4 FOCS – Web Design. No Journal Entry.
HTML Minute University Richard Fisher 10/1/2001 HTML FSA Training2 HTML Overview  HTML  HyperText Markup Language.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
HTML Hypertext Markup Language –First proposed by CERN in 1989 –It is non-linear so it allows you to jump from place to place –Markup refers to the structure.
CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.
CIS101 Introduction to Computing Week 05. Agenda Your questions CIS101 Survey Introduction to the Internet & HTML Online HTML Resources Using the HTML.
CIS101 Introduction to Computing
Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
HTML Introduction HTML
Developing a Basic Web Page Posting Files on UMBC
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
CIS101 Introduction to Computing Week 06. Agenda Your questions Excel Exam during second hour Our status after the snow day Introduction to the Internet.
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web. Web.
COMPUTERS AND INFORMATION SYSTEMS HTML. How the Web Works To access a web site  Enter its address (URL) in the address box of your browser 
 Definition of HTML Definition of HTML  Tags in HTML Tags in HTML  Creation of HTML document Creation of HTML document  Structure of HTML Structure.
Tutorial 1: Getting Started with HTML5
Overview of HTML. Three Different Approaches  Text editor like Notepad  HTML editor such as: –KompoZer –DreamWeaver –Microsoft Expression Web –iWeb.
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web Web.
Creating a Simple Page: HTML Overview
Basic XHTML Module 2: XHTML Basics LESSON 1. Module 2: XHTML Basics LESSON 1 Lesson Overview In this lesson, you will learn to:  Write XHTML code using.
Chapter 2: The Client Side: HTML CIS 275—Web Application Development for Business I.
Web Design Using HTML Codes. WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE? 1.YOU NEED A FOLDER (also called a DIRECTORY) You should set up a folder or.
CS117 Introduction to Computer Science II Lecture 2 Creating an HTML Document Instructor: Li Ma Office: NBC 126 Phone: (713)
Chapter 1 Understanding the Web Design Environment Principles of Web Design, 4 th Edition.
Tutorial 1 Developing a Basic Web Page. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives – Lesson 1 Introduction to the.
CS134 Web Design & Development Creating a Basic Web Page Mehmud Abliz.
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
HTML. WHAT IS HTML HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of.
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 1 Creating Effective Web Pages Creating HTML Documents Tutorial 8.
Just Enough HTML How to Create Basic HTML Documents.
HTML Hyper Text Markup Language. What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup.
1 Creating Web Pages Part 1. 2 OVERVIEW: HTML-What is it? HyperText Markup Language, the authoring language used to create documents on the World Wide.
Introduction to web development and HTML MGMT 230 LAB.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
Web Design Mr. Briggs’ Classes September 6-7, 2011.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
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.
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
HTML rev 01/09/2016 Hyper Text Markup Language. HTML -history  Hypertext Markup Language is the main language for creating web pages . It was first.
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
HTML Structure & syntax
Getting Started with HTML
Introduction to HTML.
HTML Basics.
CS7026: Authoring for Digital Media HTML Authoring
ET-710 Web Technology: Building and Maintaining Web Sites
Coding, Testing and Valdating a Web Page
Creating a Home Page in HTML
Objectives Overview Discuss tools for creating a website, such as text editors, code editors, and content management systems, and when to use each Explain.
Introduction to XHTML.
HTML Robert McIntosh
Overview of HTML.
Tutorial Developing a Basic Web Page
LESSON 1 Module 2: XHTML Basics Basic XHTML.
HTML Structure.
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
HyperText Markup Language
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Presentation transcript:

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.