Lesson 3 (HTML TAGS)
HTML - STANDS FOR HYPERTEXT MARKUP LANGUAGE AND IS USED TO CREATE THE CONTENT OF A WEB PAGE. HTML TAGS - <P> OPENING PARAGRAPH TAG, </P> CLOSING PARAGRAPH TAG, <HEAD>, <BODY> <p> </p> = creates a paragraph and separates the text from other text <h1> </h1> = heading, closing heading. Can be from h1-h6 which changes the sizes of the headings <b> </b> = Creates bold text which stands out from the other text <DOCTYPE! html> = lets the computer know the document is written in HTML <html> = shows the beginning of code <body> = has all the main contents of your page <li> = creates a bullet point list <ul> = creates a list with no order <ol> = creates a organised and ordered list Vocabulary: HTML = Hypertext Markup Language HTML Tags = Hypertext Markup Language Coding, example; <b> </b>, <p> </p> etc. Heading = A heading text, used for organising the text and separating it. Example; <h6> Heading </h6> Whitespace = Blank spaces in between coding to keep it more organised and easier to read Lesson 4 (HEADING) THIS LESSON CONTINUES TO INTRODUCE TAGS BUT THIS TIME INCLUDES "HEADING" - A TITLE OR SUMMARY FOR A DOCUMENT OR SECTION OF A DOCUMENT. HEADINGS ARE THE DIFFERENT SIZED SECTION THAT TITLES THROUGHOUT A WEB PAGE. HEADINGS ADD STRUCTURE TO YOUR WEB PAGE. THERE ARE SIX DIFFERENT HEADING TAGS: <H1>, <H2>,<H3>,<H4>,<H5>,<H6>, "H1" MAKES THE BIGGEST FONT, AS THE NUMBER GOES UP THE FONT GETTING SMALLER. LESSON 6 (LIST) This lesson introduces ordered and unordered lists and the associated <ul>, <ol>, and <li> HTML tags. The class practices using the tags, then goes back to the personal web page project to add a new HTML page that includes the new tags. UNORDERED LIST - <ul></ul> LIST ITEM - <li></li> ORDERED LIST - <ol></ol> LESSON 7 (IMAGE) This lesson covers how to use content created by others on a website. iNTRODUCED CODE " IMAGE - <img /> Create an image tag using the abbreviation img. This is considered a self closing tag, The / right before the ending > is optional,. you can upload an image you've found elsewhere using "ADD IMAGE" button. FIND LICENSED IMAGES AND OTHER MULTI - MEDIA FILES HERE: CREATIVE COMMONS GOOGLE IMAGE ADVANCED SEARCH WIKIPEDIA COMMONS FLICKR CREATIVE COMMONS FREE & LICENSED MUSIC LESSON 8 (CLEAN CODE AND DEBUGGING) BUG - part of a program that does not work correctly COMMENT - a comment is a programmer - readable note in the source code of a computer program DEBUGGING - finding and fixing problems in your algorithm or program INDENTATION - the placement of text farther to the right, or left, to seperate it from surrounding text which helps the convey the program's structure. WHITESPACE - refers to any character that shows up as a blank space on the screen, such as a space, a tab or a new line. Whitespace helps seperate different parts of the document to make it easier to read. <body> <h1>Here's my list</h1> <ol> <li>Item 1</li> <li>Item 2</li> </ol> </body> INTRODUCED CODE "< ! -- --> LESSON 10 (CSS) 1. CSS - stands for Cascading Style Sheets. CSS allows each HTML element to be styled according to certain set of rules.
2. HTML is used to create the actual content of the page, such as written text, and CSS is responsible for the design or style of the website, including the layout, visual effects and background color. 3. You use CSS to make the HTML elements look nicer. LESSON 11 (Styling elements with CSS) INTRODUCED CODE: Background Color - background-color: value;
LESSON 13 (RGB colors and Classes) HTML Class - Makes it possible to define equal styles for elements by giving them all the same class name. INTRODUCED CODE - RGB color STYLE USING CLASSES - (HTML FILE) - <p class="fancy">Good Day</p> <p>Bad Day</p> (CSS FILE) - .fancy |
html & css
|