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

Size: px

Start display at page:

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

Norman Simmons
5 years ago
Views:

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

2 What will we cover? HTML - Website Structure and Layout CSS - Website Style JavaScript - Makes our Website Dynamic and Interactive

3 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

4 Before we get started:

5 How to view your Website:

6 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

7 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

8 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

9 HTML

10 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

11 Our Code: What the Browser Displays: Notice: names of the tags, pairs of tags (start and end),some tags are inside other tags

12 HTML Structure Only white is rendered in browser, the grey does not structure and is a template for every web page

13 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)

14 <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)

15 <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

16 <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

17 <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)

18 Important Links

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

MPT Web Design. 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