Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh
Plan for the next 5 weeks: Introduction to HTML tags Recap on HTML and creating our template file Introduction to CSS and style Introduction CSS Animations Combining HTML, CSS to make a portfolio site
Recap of last weeks work
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 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 The Browser will not display these tags, instead it will use the tags to render the web page
HTML Reminder 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
HTML Structure Only white is visible (rendered) in browser, the grey does not structure and is a template for every web page
CSS
Where to write our CSS? 3 Places the Style can go We can write all our CSS in an external CSS file and link it to our HTML document We can write our CSS within <style> tags in the <head> tag of our HTML document We can write our CSS inline. That is within the HTML tags: <div style= color: blue; ></div>
What can we do with CSS? Change Colour Change Spacing Change the Font Change the Layout Change the Size of things We can give things Borders And much more.
What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements are to be displayed on screen It allows us to change the style or appearance of our web page CSS contains a selector and property, value pair The selector is the HTML tag you would like to style h1 {color: blue;} In this example, all the h1 tags in the HTML document will be changed to blue Selector (HTML tag) Property Value
CSS Syntax The declaration block is contained within { } there can be multiple declarations within these { } A declaration must include a style property and a value, they are separated by : A CSS declaration always ends with a ; Declaration Declaration h1 {color: blue; text-align: center;} Selector (HTML tag) Property Value Property Value
CSS Syntax In the below example all text within h1 (heading) tags will be displayed in the browser in blue But what if we did not want to change all the h1 elements? Perhaps we only wanted to change one h1 tag to display blue To write a comment in CSS we use /* comment written here */ h1 {color: blue;}
CSS: Colour
CSS Colour There are a few ways of selecting colour. Today we will use the colour name You can find a list of supported colour names at: https://www.w3schools.com/colors/colors_names.asp
Important Links https://www.w3schools.com/colors/colors_names.asp