HTML & CSS
After watching the Youtube clip in the right, describe the following in your own words;
|
|
HyperText Markup Language (HTML) is a markup language that is used for multimedia documents such as web pages. Web pages are displayed using a program called a web browser (e.g, Mozilla Firefox, Google Chrome and Microsoft Internet Explorer).
The instructions a web browser needs to display a web page are stored in a file. This file contains the text you want displayed in the browser and the HTML codes which control the formatting of the text, images, tables, links etc. you want on the page. The text file must be saved using the file extension .htm or .html.
HTML provides a wide range of formatting codes called tags. These tags are contained within angle brackets (< & >) and usually come in pairs.
For example, the tag to make text bold is <b> and the tag to turn the bold off is </b> These tags are used to control how portions of text (and other objects like images and input boxes) are displayed.
The instructions a web browser needs to display a web page are stored in a file. This file contains the text you want displayed in the browser and the HTML codes which control the formatting of the text, images, tables, links etc. you want on the page. The text file must be saved using the file extension .htm or .html.
HTML provides a wide range of formatting codes called tags. These tags are contained within angle brackets (< & >) and usually come in pairs.
For example, the tag to make text bold is <b> and the tag to turn the bold off is </b> These tags are used to control how portions of text (and other objects like images and input boxes) are displayed.
The first line in the example above, <!doctype html>, is a document type declaration and it lets the browser know which flavor of HTML you’re using. It’s very important to stick this in - If you don’t, browsers will assume you don’t really know what you’re doing and act in a very peculiar way.
Tags
The <html> is the opening tag that kicks things off and tells the browser that everything between that and the </html> closing tag is a HTML document. The content between <body> and </body> is the main content of the document that will appear in the browser window. All you need to remember is that all tags with content between them should be closed, in the format of
opening tag → content → closing tag.
HTML Basic Tags
Tag Description
<html></html> Creates an HTML document
<head></head> Sets the title (which appears in the browser window) and other information that isn't
displayed on the web page itself – defines the section of code that contains metadata
about the HTML document itself
<body></body> Sets off the visible portion of the document
<body bgcolor="pink"> Sets the background colour, using name or hex value
<hl></hl> Creates the largest headline
<b></b> Creates bold text
<a href="URL"></a> Creates a hyperlink
<p></p> Creates a new paragraph
<img src="name"> Inserts an image
HTML5 is a new version of HTML which makes it possible for compatible browsers to stream audio and video without the need for additional plug-ins.
<canvas> Draw graphics on the fly, via scripting (usually JavaScript)
<svg> Draw scalable vector graphics
<audio> Defines sound content
<embed> Defines containers for external applications (like plug-ins)
<source> Defines sources for <video> and <audio>
<track> Defines tracks for <video> and <audio>
<video> Defines video or movie content
Attributes
Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their values sit inside quotation marks. They look something like:
<a href="https://www.w3schools.com">Visit W3Schools</a>.
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to.
<img src="img_girl.jpg">
The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed
<img src="img_girl.jpg" width="500" height="600">
The <img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels):
<p style="color:red;">This is a red paragraph.</p>
The style attribute is used to add styles to an element, such as color, font, size, and more
Elements
Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in between (and includes) the <body> and </body> tags is the body element.
As another example, where as “<title>” and “</title>” are tags, “<title>Harry Potter</title>” is a title element.
Activity 1
Label the following image with these terms; ‘closing tag’, ‘HTML element’, ‘opening tag’, ‘HTML element content’
Tags
The <html> is the opening tag that kicks things off and tells the browser that everything between that and the </html> closing tag is a HTML document. The content between <body> and </body> is the main content of the document that will appear in the browser window. All you need to remember is that all tags with content between them should be closed, in the format of
opening tag → content → closing tag.
HTML Basic Tags
Tag Description
<html></html> Creates an HTML document
<head></head> Sets the title (which appears in the browser window) and other information that isn't
displayed on the web page itself – defines the section of code that contains metadata
about the HTML document itself
<body></body> Sets off the visible portion of the document
<body bgcolor="pink"> Sets the background colour, using name or hex value
<hl></hl> Creates the largest headline
<b></b> Creates bold text
<a href="URL"></a> Creates a hyperlink
<p></p> Creates a new paragraph
<img src="name"> Inserts an image
HTML5 is a new version of HTML which makes it possible for compatible browsers to stream audio and video without the need for additional plug-ins.
<canvas> Draw graphics on the fly, via scripting (usually JavaScript)
<svg> Draw scalable vector graphics
<audio> Defines sound content
<embed> Defines containers for external applications (like plug-ins)
<source> Defines sources for <video> and <audio>
<track> Defines tracks for <video> and <audio>
<video> Defines video or movie content
Attributes
Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their values sit inside quotation marks. They look something like:
<a href="https://www.w3schools.com">Visit W3Schools</a>.
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to.
<img src="img_girl.jpg">
The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed
<img src="img_girl.jpg" width="500" height="600">
The <img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels):
<p style="color:red;">This is a red paragraph.</p>
The style attribute is used to add styles to an element, such as color, font, size, and more
Elements
Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in between (and includes) the <body> and </body> tags is the body element.
As another example, where as “<title>” and “</title>” are tags, “<title>Harry Potter</title>” is a title element.
Activity 1
Label the following image with these terms; ‘closing tag’, ‘HTML element’, ‘opening tag’, ‘HTML element content’
Label the following image with these terms;
‘closing tag’, ‘attribute’, ‘value’, ‘HTML element’, ‘opening tag’, ‘HTML element content’
‘closing tag’, ‘attribute’, ‘value’, ‘HTML element’, ‘opening tag’, ‘HTML element content’
Activity 2
- Access the website code.org
- Create an account or log in using your education email address
- Access the following web lab link
- We will work through the unit together as a class - START FROM LESSON 2 ‘INTRO TO HTML’. You will learn how to use HTML and CSS effectively to create a webpage
- Goal is to complete:
- Lesson 2 - Intro to HTML
- Lesson 3 - Headings
- Lesson 4 - Mini-Project: HTML Web Page
- Lesson 5 - Digital Footprint
- Lesson 6 - Styling Text with CSS
- Lesson 7 - Mini-Project: Your Personal Style
- Lesson 8 - Intellectual Property
- Lesson 9: Using Images
- Lesson 10 - Websites for Expression
- Lesson 11 - Styling Elements with CSS
- Lesson 12 - Your Web Page - Prepare
- Lesson 13 - Project - Personal Web Page
![]()
![]()
|
![]()
|