Download presentation
Presentation is loading. Please wait.
1
Week 1: Introduction to HTML and Web Design
MPT Web Design Week 1: Introduction to HTML and Web Design
2
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
3
Class Plan WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5
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: WEEK 4 More JavaScript WEEK 5 HTML, CSS, JavaScript, complete portfolio site and competition site
4
What will we need?
5
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 Homework: Download and install a text editor on your machine
6
Where do I save my Files? Computer ⇒ yourUsername ⇒ public_html
7
How do I see my website?
8
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:
9
Browsers ** + many more lesser known and developed
10
What’s the difference? Personal Preference and Feature Compatibility
CanIUse Browser Comparisons
12
What is HTML?
13
<tagname>Some Content in here….</tagname>
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
14
HTML
15
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)
16
<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)
17
<body> Simple Tags
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
18
<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
19
<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)
20
Important Links
Similar presentations
