Week 1: Introduction to HTML and 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 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
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 Homework: Download and install a text editor on your machine
Where do I save my Files? Computer ⇒ yourUsername ⇒ public_html
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?
<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
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 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