Review of HTML (adapted from Guthrie, 1-6-99, last updated January, 2007)

Slides:



Advertisements
Similar presentations
Anatomy of a Web Page. Parts of a Web Page Title Bar Navigation Tool Bar Location Bar Header Graphic/Image Text Horizontal Rule Links.
Advertisements

Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
Html: getting started HTML is hyper text markup language. It is what web browsers look at on the Internet. HTML documents should be created in a simple.
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.
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.
CS 121 Concepts of Computing II Introduction to Web Page/Site Development.
HTML Computing Concepts HTML - An Introduction 1.
Internet Publishing / Dreamweaver Luke E. Reese ANR Educ. and Communication Systems
Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Creating Web Pages Getting Started. Overview What Web Pages Are How Web Pages are Formatted Putting Graphics on Web Pages How Web Pages are Linked Linking.
Marking Up With Html: A Hypertext Markup Language Primer
HTML Introduction HTML
Internet Publishing / Dreamweaver Luke E. Reese CARRS
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
CPSC 203: Introduction to Computers Tutorials 03 & 29 by Jie (Jeff) Gao.
Overview of HTML. Three Different Approaches  Text editor like Notepad  HTML editor such as: –KompoZer –DreamWeaver –Microsoft Expression Web –iWeb.
Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction.
Chapter 4 Fluency with Information Technology L. Snyder Marking Up With HTML: A Hypertext Markup Language Primer.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.
Chapter 2: The Client Side: HTML CIS 275—Web Application Development for Business I.
July 2007 Web Design Developing a Class Website for the Tsunami Shelter Challenge Rozeanne Steckler
INTRODUCTION TO DREAMWEAVER 8. What we already know…  Design basics  Contrast  Repetition  Alignment  Repetition  HTML.
WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.
HTML H yper T ext M arkup L anguage. HTML HTML is NOT case sensitive However, proper coding etiquette if for all to be in ALL CAPS and for text to be.
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Introduction to Computers CS Dr. Zhizhang Shen Chapter 4: Talking.
McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module F Building a Web Page with HTML.
F-1 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Extended Learning Module.
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
OBJECTIVES  What is HTML  What tools are needed  Creating a Web drive on campus (done only once)  HTML file layout  Some HTML tags  Creating and.
Html Basic Codes Week Two. Start Your Text Editor Windows use 'Notepad’ Macintosh use 'Simple Text'
HTML 4 Foundation Level Course HyperText Markup Language Most common language used in creating Web documents. You can use HTML to create cross-platform.
Department of Information Technology Chapter 8 - Creating Hypertext links Lecturer: Ms Melinda Chung.
HTML CRASH COURSE. What is HTML?  Hyper Text Markup Language  The language used to make web pages  Written by using tags.
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.
15.1 Fundamentals of HTML.
Overview of HTML/XHTML Two Different Approaches  Text editor like Notepad  HTML editor such as: –KompoZer –DreamWeaver –Microsoft Expression Web –iWeb.
HTML Basic IST2101. Keep In Mind Programming can be time consuming. Plan ahead!
1 © Copyright 2000 Ethel Schuster The Web… in 15 minutes Ethel Schuster
1 Using HTML and JavaScript to Develop Websites. Using Images.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
Georgia Institute of Technology Making Text for the Web Barb Ericson Georgia Institute of Technology March 2006.
Introduction to HTML. HTML Introduction HTML – Hypertext Markup Language are the instructions that tell a browser how to lay out the information (text,
Computational Boot Camp HTML Mike Schaffer. 8/23/2002 (MES) HTML What is HTML? HTML stands for HyperText Markup Language HTML is the language for publishing.
Web Page Design Introduction. The ________________ is a large collection of pages stored on computers, or ______________ around the world. Hypertext ________.
The Teacher Computing HTML HyperText Markup Language.
4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.
HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
HTML BASIC IST 210: Organization of Data IST210 1.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
Internet Publishing / Dreamweaver Luke E. Reese Biosystems & Ag. Engr. / CARRS
1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page.
Chapter 27 Getting “Web-ified” (Web Applications) Clearly Visual Basic: Programming with Visual Basic nd Edition.
Basic HTML Programming Technology Education Ellsworth Community Middle School Communication Systems.
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
Getting Started with HTML. HTML  Hyper Text Markup Language  HTML isn’t a program language, its known as a markup language  A Markup language has tags.
The idea of adding markup instructions to documents is not new. Before computers, authors would make annotations by hand in their written or typed documents.
Making a webpage using DreamWeaver CSC 152 (Blum)1.
HTML-I Basic HTML Elements. HTML (Hyper Text Markup Language) HTML is a document layout and hyperlink- specification language. i.e. a language used to.
HTML HTML stands for Hyper Text Markup Language. HTML is used in making the base of a Website You can just use an online website maker like weebly.com.
HTML Basic IST 210: Organization of Data IST2101.
Basic Web Publishing M. Scott Gartner 7/15/98.
HTML Basics.
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
Presentation transcript:

Review of HTML (adapted from Guthrie, , last updated January, 2007)

HTML Issues for E-Commerce why need to know HTML code? what is HTML? common HTML tags WYSIWYG authoring tools

Why Know HTML Code? new technologies start out as code, no tools HTML (early days), JavaScript, Java, ASP, XML helps to know HTML code to insert ASP or JavaScript into a HTML file if can read code, can copy clever ideas authoring tools don’t give as much control highest paid professionals use HTML editorsHTML editors

What Is HTML? Hyper Text Markup Language hyper means much greater hypertext has hotlinks to other material markup language tells computer how/where to display content word processing programs use their own markup languages were visible (show codes), now hidden

Basic Document Structure hotlink Your Title This is where your content goes.

Hexadecimal System computer data is stored in bits: 0s and 1s 8 bits (binary digits) = 1 byte (decimal 66) = B “hex” is easier to read (2 hex digits = 8 bits) hex digits run from 0 to 9, then a to f 00 = smallest 2 digit hex # (decimal 0) ff = largest 2 digit hex # (decimal 255) is 42 in hex

Colors human eye sees 3 colors: Red, Green, Blue computers have RGB monitors all colors you see based on R, G & B levels HTML uses 2-digit hex for colors = ? (no R, no G, no B) ffffff = ? (full power on all 3 colors) = ? (half power on all 3 colors) ff0000 = ? (full power on ?)

Special Characters puts in a nonbreaking space(s)   is the same © © for copyright notice © < < less than (visible in HTML) £ £ pound (British) £ ¥¥ yen (Japanese) ¤ € € Euro (new currency) €

Images where ext is usually gif or jpg alt provides text to show when mouseover to align images use (or right) text wraps around other side of image other alignments don’t wrap text

Hyperlinks Basic Hyperlink (hotlink) text you want to use for a link case is critical on many servers so save yourself a lot of trouble: always use lowercase in paths & filenames

Paths, Filenames & Extensions path = file or filename = index.html index.html and/or default.html is default (opens if no filename provided) file extension or type =.html (or.gif,.jpg, etc.)

Shortened Paths web sites will be more portable (easier to move) if you don't use the full paths in hotlinks only need to use the file name for files in same directory "rdw.html"

Shortened Paths - 2 can also use abbreviated paths for other directories (demo in DOS w \) "images/rdw.jpg" means look in the images subdirectory of the current directory "../451common/index.html" means go up one directory, and then look down into its 451common subdirectory

Default Files if just link to directory, but not to any file, browser will look for and open any default files index.html or index.htm default.html or default.htm index.aspx or default.aspx good idea to use a slash at end of directory path (e.g.,

Exercise click hotlink in IE, then View Source hotlink add some text experiment with code from these slides colors, sizes, lists, etc. add free web graphics from Clipart.comClipart.com backgrounds images (experiment with alignment)