Alabama Educational Technology Conference
Developing Websites Using HTML Michael Smith Executive Director Center for Technology Access & Training info@cetat.org www.cetat.org Prince George’s Community College Associate Professor | Department Chairman
Overview Introduction / Expectations Basic Terminology HTML Code Storyboarding Hosting Wrap Up jhjhjhjh
Introductions Name Occupation (if working) Expectation
Web Terminology Hypertext markup language Browser Text Editor File Extensions (html and image file extensions)
HTML Codes - TAGS Title Heading Paragraph Horizontal Rule Colors Images Links DOCTYPE HEAD BODY
Exercise Create Web Page Save Web Page View Web Page Edit Web Page Tags Save Web Page File Extensions View Web Page Edit Web Page <TITLE> <H1>, <H2>, <H3>, <P> <HR /> <UL> <OL> <IMG SRC>
Adding Color Color Colorname Hexadecimal # Background Color Text Color Link Color Colorname Hexadecimal #
HTML Codes – TAGS (links) Link to external site <a href="http://www.w3schools.com">Visit W3Schools</a> Link to internal page <a href=“page.html">Visit W3Schools</a>
Storyboard (layout) Hierarchical Linear
Design Considerations Repetition Banner Location of links Colors Fonts Proximity Related items placed close Unrelated items separated by space Contrast Variance between background and text color Alignment All pages should have some alignment
Wrap-Up
Supplemental Information Web server Home page Web page Web site Start page URL Domain TCP/IP DNS FTP Upload / Download Registering a Domain Filename Conventions Screen Resolutions
Resources DocType http://www.w3schools.com/tags/tag_doctype.asp Storyboard http://www.nvcc.edu/home/ataormina/wdc/readings/storybd.htm Title, Heading and Paragraphs http://www.w3schools.com/html/ Images http://www.w3schools.com/html/html_images.asp Links http://www.w3schools.com/html/html_links.asp Color Names http://www.w3schools.com/html/html_colornames.asp CSS Tutorial http://www.w3schools.com/html/html_css.asp http://www.w3schools.com/css/tryit.asp?filename=trycss_default
CSS – Cascading Style Sheets CSS describes how HTML elements are to be displayed on screen, paper, or in other media (w3schools) CSS saves a lot of work. It can control the layout of multiple web pages all at once (w3schools) External stylesheets are stored in CSS files (w3schools) 3 Ways to apply CSS, external, internal, inline http://www.w3schools.com/css/css_howto.asp CSS Tutorial - http://www.w3schools.com/css/tryit.asp?filename=trycss_default
JavaScript What is JavaScript? – an object-oriented computer programming language commonly used to create interactive effects within web browsers What can it do? - change HTML attributes, validate text, menu and button effects
JavaScript - Demo Sample JavaScript Programs - http://www.w3schools.com/js/js_intro.asp
<!DOCTYPE html> <html> <body> <h1>What Can JavaScript Do?</h1> <p id="demo">JavaScript can change HTML content.</p> <button type="button" onclick="document.getElementById('demo').style.color ='red'"> Change to Red!</button> onclick="document.getElementById('demo').style.color ='blue'"> Change to Blue!</button> onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'"> Change Text!</button> </body> </html>
References Basics of WEB DESIGN HTML 5 & CSS3 – Terry Felke-Morris – ISBN 13: 978-0-13-700338-9 http://www.w3schools.com http://www.websiteoptimization.com/speed/tweak/size/