MPT Web Design

Download Report

Transcript MPT Web Design 

MPT Web Design
Week 1: Introduction to HTML and Web Design
What will we do in this class?
Learn the basics of HTML and how to create our own template
Basic website structure
Learn design concepts for a web page
Learn how to style a page using CSS
Make a page dynamic with CSS
Extend website functionality with JavaScript
Class Plan
WEEK 1
Introduction to HTML, Page Structures/layouts, Browsers
Homework: Make a HTML page for your competition page. Come up with a design plan
WEEK 2
Introduction to CSS and how to apply style to a web page
Homework: Colour and design scheme for your competition page using paletton
WEEK 3
Introduction to JavaScript and dynamic web pages
Homework:
What will we need?
What tools will we use?
We will use a text editor to write our code and a
browser to test
Examples of Text Editors:
Notepad
Notepad ++
Textwrangler
Sublime Text
Where do I save my Files?
Computer
⇒
public_html
yourUsername
⇒
How do I see my website?
http://cs1.ucc.ie/~yourUsername
How do I test my Code/Scripts?
Right Click your .html file
Open with….. (a browser)
OR
Upload to public_html and visit your website:
http://cs1.ucc.ie/~yourUsername
Browsers
** + many more lesser known and developed
What’s the difference?
Personal Preference and Feature Compatibility
CanIUse Browser Comparisons
What is HTML?
HTML
HTML stands for Hyper Text Markup Language
Describes the structure of Web pages
Elements are the building blocks of HTML pages and are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the page
<tagname>Some Content in here….</tagname>
Defines the type of element
The stuff that gets displayed
Close off the element
HTML
HTML Required Tags
<!DOCTYPE html>
Declares that this page uses HTML as it’s markup language
<html></html>
Every other tag on your page goes inside HTML tags
<head></head>
Where you give meta-information about the site, e.g. title, author, keywords,
and import scripts and stylesheets (more on this later)
<body></body>
Where your main visible content goes. Contains all other markup elements
(tables, sections, text, images, whatever)
<head> Tags
<title>
Website Title ⇒ Shows up in the tab at the top. Simple title for your site
<meta>
Meta-information ⇒ Used for page description, author, character set etc
<style>
Style ⇒ Allows CSS style to be written into the page
<script>
Script ⇒ Allows ECMAScript or Javascript to be written into the page
<link>
Link ⇒ References an external file to be loaded with the page (usually
external stylesheet or script file)
<body> Simple Tags
<p>
Paragraph ⇒ Creates a paragraph of text on a new line
<h1>
Heading ⇒ Creates a text heading. Goes from h1 ⇒ h6 for different heading
sizes/styles
<a>
Anchor ⇒ a link to another website/html document/download etc
<br>
Line break ⇒ Moves content to a new line
<img>
Image ⇒ Embed an image in the page
<body> Formatting Tags
<ul>
Unordered list ⇒ tag that contains list elements
<li>
List element ⇒ An entry in the <ul> list
<table>
Table layout ⇒ contains table row and column elements
<tr> & <td>
Table rows and table columns
<body> Structural and Semantic Tags
<div>
Division tag ⇒ Creates a divided section for content (HTML4)
<header>
Specifies a header for a document or section (you can have multiple)
<article>
Specifies independent, self-contained content (blog/forum post, article)
<section>
Like div, normally a thematic grouping of content
<aside>
For sidebar or aside information
<footer>
Specifies a footer for a document or section (you can have multiple)
Important Links
http://www.w3schools.com/
http://aaronbolger.com/mpt