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 for the next 5 weeks: Introduction to HTML tags, creating our template file Introduction to CSS and style Introduction to JavaScript More advanced JavaScript & Portfolio Site
Before we get started:
How to view your Website: http://cs1.ucc.ie/~yourusername
What you will need? We will write our code using a text editor such as Notepad++, Sublime or Text Wrangler We will then test our code in a Browser such as Google Chrome, Mozilla Firefox, Internet Explorer For Homework: Download and install a text editor on your personal machine
What we will use in Class We will write our code in Notepad ++ and test our code in Google Chrome by visiting your website URL (cs1.ucc.ie/~yourusername) You can use other Browsers and text editors But Google Chrome lets us test our code for errors using Developer Tools in Settings
Web Design Competition There will be a competition for the best designed website!! Theme is: "Scientific Exploration, the new pioneers into the unknown lands of scientific discovery and innovation. Engineering that will excite and enhance our lives." To enter: Simply upload your website into a folder named competition on your Public_html
HTML
What is HTML? HTML stands for Hyper Text Markup Language HTML allows us to describe and define the structure of our website using markup All the elements in a web page are represented in tags <tag> Example of HTML elements include: headings, paragraphs, images, videos Nearly all HTML tags come in pairs with an start and end tag <tag> </tag> The Browser will not display these tags, instead it will use the tags to render the web page <tagname>some Content in here.</tagname> Defines the type of element The stuff that gets displayed Close off the element
Our Code: What the Browser Displays: Notice: names of the tags, pairs of tags (start and end),some tags are inside other tags
HTML Structure Only white is rendered in browser, the grey does not structure and is a template for every web page
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/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/