HTML & CSS 7 Languages in 7 Days.

HTML & CSS 7 Languages in 7 Days

What are HTML & CSS? All websites use HTML and CSS. After learning both of these languages, you will be ready to build your own website! HTML stands for Hyper Text Markup Language. It is used to give websites structure with text, links, images, and other fundamental elements. CSS stands for Cascading Style Sheets. It is used to change the appearance of HTML elements.

Example website Let’s have a look at an example of the website we’re going to produce today Go to madlab.org.uk/ncw-files Save all the files under HTML & CSS into one folder on your computer Makes sure people use chrome or firefox. When saving the image files, they need to click on the picture and then save as, so the file name is just ‘pikachu’ not pikachu-150x150

Creating your first HTML web page
Create a new folder for your web page files, it’s important to keep them all together in the same place Open up a text editor, such as Notepad++, or Atom Save the blank file as index.html Get them to create a new folder to keep their files in, we will be asking them to install notepad++ or atom before arriving

HTML Metadata Setup your webpage with the bare bones of HTML
<!DOCTYPE html> - tells the web browser to expect an HTML document <html>.....</html> - the root of the HTML document and parent of all other HTML elements on the webpage <head>.....</head> encloses other metadata about the site <body>.....</body> contains the code for the web page Explain the difference between head and body, and how both these tags go inside the <html>.....</html> tags

Anatomy of an HTML element
HTML code can be broken down into different elements. Each element has it’s own name, and way in which it is displayed. All HTML elements begin with an opening tag < ? > Most elements require a closing tag </ ? > The website user only sees the content between the tags ? is where the element name would go, eg h1, p...

HTML Heading Elements <h1> <h2> <h3> <h4>

HTML Heading Elements Add some header elements to your index.html file
In the body, add; An h2 element with the text ‘Menu’ An h1 element with the title of your website An h3 element with a tagline for your website Think of a theme for a web page Create an h2 heading in the body of your code and write ‘Menu’ Create an h1 heading for the title of your web page Create an h3 heading for your web page’s tag line

Viewing your webpage Save any changes made in your index.html file
Go into your web pages folder, and double click on the index.html file. Rather than opening with the editor, the file should display your web page in your browser You can now refresh this page after making and saving edits to see the changes Think of a theme for a web page Create an h2 heading in the body of your code and write ‘Menu’ Create an h1 heading for the title of your web page Create an h3 heading for your web page’s tag line

Basic HTML Elements <p> - paragraph <ul> - unnumbered list
<ol> - numbered list <li> - list item Explain how each list item goes inside the li tag, but all items are enclosed within either the ul, or ol tags

Basic HTML Elements Underneath your h3 tags, add a description of the website using p tags Underneath your h2 Menu, add an unnumbered list, including at least 3 menu items Under your h3 heading, create a paragraph with a brief intro to your web page Under your h2 menu, create an unnumbered list of 4 menu items

HTML Anchor Elements Anchor elements use an attribute to link users to other web pages. Attributes customise the behaviour or appearance of HTML elements. href specifies the URL for a link <a href=” Click here for Google</a> <a href=”google.html”> Click here for Google</a>

HTML Anchor Elements Inside your <p> tags, add in a link to an external web page <a href=” Click here for Google</a> Create a link to another web page within the paragraph section of your site

HTML Image Elements To add an image to a webpage we use the HTML image element. We use the src attribute to tell the webpage where to find the source of an image <img src=” <img src=”image.jpg”/> Image elements are self closing Insert an image underneath the paragraph section of your web page

HTML Image Elements Underneath you <p> tags, add an image to your web page. You’ll either need to link to an image already on the web via the url, or save the image to your website folder and link to the file. <img src=” <img src=”image.jpg”/> Image elements are self closing Insert an image underneath the paragraph section of your web page

HTML Video Elements The HTML video element can add a video to a webpage, and uses a number of attributes <video width=”320” height=”240” controls> <source src=”video-url.mp4” type=”video/mp4”> </video> YouTube - share - embed - show more width and height: Set the size of the screen that displays the video. controls: Adds play, pause and volume control. source src: Sets the URL of the video to play. type: Specifies different video formats.

HTML Video Elements Replace your image with a video.
You’ll either need to download a video to your website folder, or embed one from YouTube Swap your image out for a video from youtube

HTML Div Elements Div elements divide the content of your web page by grouping elements together These groups of elements can then be organised, moved and styled independently from other groups Div elements can be used with class attributes to point to a class in the stylesheet

HTML Div Elements Create three div classes, the first encompasses the h2 menu and unnumbered list, the second ecompasses everything below, the third encompasses the whole ‘body’ of the document <div class=”nav”>.....</div> <div class=”main”>.....</div> <div class=”container”>.....</div>

Creating page 2 Now we’re going to create a second web page for our website On your html doc, go to the menu, and ‘save as’ page2 Underneath the h3 tag, remove your existing <p> text and the image or video, and replace with new content of your choice. Be creative, use images, links and lists!

Creating page 2 Once you’re happy with your second page, go back to your index.html document and link one of your menu items to the new page using the anchor element <a href=”page2.html”>.....</a> Refresh your browser displaying index.html, and check your link works. You now have a 2-page website!

HTML Head Elements Elements in the head section contain the web page’s metadata. They communicate vital information to the browser, even if they’re not visible on the web page <title> ? </title> - contains the site’s title <meta charset=”utf-8”/> - tells the web browser which character set to use Get them to add this data to the head of their file

HTML Head Elements <link rel=”stylesheet” type=”text/css” href=”main.css”> The HTML link element links a CSS file to an HTML file so that CSS styling can be applied. rel: specifies the relationship between the current file and the file being linked to type: specifies the type of file linked to href: provides the url of the file being linked to Get them to add this data to the head of their file, we will create the css file next

What is CSS? CSS is a language used to style websites. Colours, fonts, and page layouts for a site can all be managed using CSS The metadata of our HTML page specifies where our style sheet can be found <link rel=”stylesheet” type=”text/css” href=”main.css”>

Adding CSS to our web page
Copy the css file from the example web page folder into your website folder Refresh the web page and see how different it now looks All these visual changes are done using CSS

Anatomy of CSS The selector specifies which HTML element or group of elements you wish to style Example selectors are h1, div, .container Classes are preceded by a .

Anatomy of CSS Open up the example css file with your editor h1 {
font-size: 48px; } In this case, h1 is the selector

Anatomy of CSS Following the selector is the property & value, located inside curly brackets h1 { font-size: 48px; } font-size is the property, 48px is the value Change the size of the font, save the file and reload the web page to see your changes take effect Move on to looking at other things CSS can change

Changing the font Changing the font is done by using the font family property h1 { Font family: Georgia, serif; } This code changes the font of the h1 element to Georgia, with a fall back of serif Get them to try adding the code in the h1 selector, they can try a few different fonts

Changing colour with CSS
CSS can be used to change the colour of fonts, and backgrounds Colour can be specified in three ways Keyword - red, blue, darkcyan, firebrick Hex code - #800080, #ffff00, #ff1493, #ff4500 RGB - (255,0,51) (0,255,0) (255,0,0) Notice the incorrect spelling of colour! Get them to change the font-color of the h1 element, and also play with the background colour on line 43

Changing font size CSS CSS can also be used to change font size. This again can be done in different ways. Font-size: small/medium/large 50%/150%/250% 10px/20px/48px 2.6 rem/0.875em/ Get them to play with different ways of changing font size on the h1 element

What if you get stuck?

Copy & Paste your code Why write something from scratch when you don’t need to? If there’s something you don’t know how to do, there are places you can go for help. Google.co.uk w3schools.com

Where to go next? Codecademy Free Code Camp
Other National Coding Week workshops CodeUp

Challenges Create a third page Change the colour of the menu section
Add a background image to the div ‘main’ Using what you’ve learnt, complete the ‘About You’ challenge on codecademy.com/learn

HTML & CSS 7 Languages in 7 Days.

Similar presentations

Presentation on theme: "HTML & CSS 7 Languages in 7 Days."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

HTML & CSS 7 Languages in 7 Days.

Similar presentations

Presentation on theme: "HTML & CSS 7 Languages in 7 Days."— Presentation transcript:

Similar presentations

About project

Feedback