IAL: how to create a code and leaern new things
Today in the morning block Mrs Shearing came into my class to have our last Cybersmart lesson for this term. But in today's lesson we had a lesson about HTML. HTML stands for HyperText Markup Language. HTML describes the structure of the webpage, what text, images or links are on the page. She gave us this work because she was working with Year 12's at Tamaki College and she asked if my class could do it and the Year 12's said no because its was quite hard for them.
While we were doing this work we were asked to go on the site where we are doing the HTML thing and we had to learn codes and new things. The site is called Codepen.io. We had to do what Mrs shearing wanted us to do and that was to learn how to type a code and it would come up with it. On our class site is some shortcuts you can do on the Codepen.io site and here are the shortcuts.
<> open brackets, close brackets,
/ close instruction
<head> meta data belonging to the page
<body> what appears on the page
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Helpful html
| Tags - end with </> | Attributes and Elements |
| <b> - Bold text | <h1> </h1> |
| <strong> - Important text | <h2> </h2> |
| <i> - Italic text | <h3> </h3> |
| <em> - Emphasized text | <h4> </h4> |
| <mark> - Marked text (highlighted) | e.g. <h2>HTML <small>Small</small> Formatting</h2> |
| <a> - defines a hyperlink | |
| <p> - new paragraph | Style attributes<body style="background-color:powderblue;"> |
| <small> - Small text | <p style="color:red;">This is a paragraph.</p> |
| <del> - Deleted text | <h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p> |
| <ins> - Inserted text | <h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p> |
| <sub> - Subscript text | |
| <sup> - Superscript text | Class attributes - refers to a class on a style sheet |
| <br> - Line break | <div class="class name"> </div> |
| <table> - table, <tr> - table row, <td> - table data, <th> - table header row. | <p class="important"></p> |
| <hr> - Theme break, change in content | Div and span elements |
<pre> - preformatted -
is displayed in a fixed-width font.
It preserves both spaces and line breaks. | <div> Defines a section in a document (block-level) |
| <q> - quote | <span> Defines a section in a document (inline) |
| <html> </html> | start / end tag |
| <a href="https://www.w3schools.com">This is a link</a> | link tag / link element
(attach hypertext reference) |
| <img src="pic_mountain.jpg" alt="MountainView" style="width:304px;height:228px;"> | images element / size attribute / alt attribute
(image source) |
| <html lang="en-US"> | language attribute |
| <p title="I'm a tooltip">This is a paragraph.</p> | title element |
| <head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
|
head element
The HTML <head> element has nothing to do with HTML headings. The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed. The <head> element is placed between the <html> tag and the <body> tag:
|
Colours
Colours can be specified by name, RGB or HEX value
Colours by name:
Colour Chart
Borders: - HTML head and style
<head>
<style>
h1 {
color: blue;
font-family: courier;
font-size: 160%;
}
p {
color: lime;
font-family: courier;
font-size: 100%;
}
</style>
</head>
CSS
start with
h1 {
border: 4px solid red
}
h1 {
border: 4px solid red;
padding: 30px;
margin-top: 30px;
margin-right: 300px;
margin-left: 300px;
}
After putting some codes on and colours on the codepen.io site we had to save everything that is on the top right hand corner of the screen. Then we had to close our netbooks because it was time for us to pack up and get ready to go and get ready and go and have our morning tea and then come back up because we had to go swimming after that.
What I found challenging was that I didn't understand what the codes were until I went on the site and looked at all the codes. What I enjoyed was that I learned how to make a code.
I hope you like it Cooment Feedback and Feedforward please.
Malo
