Web Programming and Design

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

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

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

HTML StructureOnly 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/

Web Programming and Design