MPT Web Design. Week 1: Introduction to HTML and Web Design

Size: px

Start display at page:

Download "MPT Web Design. Week 1: Introduction to HTML and Web Design"

Jayson Norman
5 years ago
Views:

1 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 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 Homework: 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 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 <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

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

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1 Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 1 What will we cover? HTML - Website Structure and Layout CSS - Website Style JavaScript - Makes our Website Dynamic and Interactive Plan