Download presentation
Presentation is loading. Please wait.
1
Alabama Educational Technology Conference
2
Developing Websites Using HTML
Michael Smith Executive Director Center for Technology Access & Training Prince George’s Community College Associate Professor | Department Chairman
3
Overview Introduction / Expectations Basic Terminology HTML Code
Storyboarding Hosting Wrap Up jhjhjhjh
4
Introductions Name Occupation (if working) Expectation
5
Web Terminology Hypertext markup language Browser Text Editor
File Extensions (html and image file extensions)
6
HTML Codes - TAGS Title Heading Paragraph Horizontal Rule Colors
Images Links DOCTYPE HEAD BODY
7
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>
8
Adding Color Color Colorname Hexadecimal # Background Color Text Color
Link Color Colorname Hexadecimal #
9
HTML Codes – TAGS (links)
Link to external site <a href=" W3Schools</a> Link to internal page <a href=“page.html">Visit W3Schools</a>
10
Storyboard (layout) Hierarchical Linear
11
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
12
Wrap-Up
13
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
14
Resources DocType http://www.w3schools.com/tags/tag_doctype.asp
Storyboard Title, Heading and Paragraphs Images Links Color Names CSS Tutorial
15
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 CSS Tutorial -
16
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
17
JavaScript - Demo Sample JavaScript Programs -
18
<!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>
19
References Basics of WEB DESIGN HTML 5 & CSS3 –
Terry Felke-Morris – ISBN 13:
Similar presentations
