This is the second part of the live coding tutorial. [B]The first thread can be found here[/B]
I will enter into JavaScript and other languages in future. If you need private tutoring for other languages contact me through Private Message or send me an email: [email protected]
Let’s add a Favourite Icon(FAV ICON), the fav icon is the icon the appears at the header of the website. Favicon is best in .ico image format. With the current browsers today, large images are automatically resize to icon size.
Let’s follow the due process to convert our image to a Fav Icon size (16px by 16px).
Click here to generate your Favicon
Inside the [COLOR=rgb(226, 80, 65)] section of the website, after the [COLOR=rgb(226, 80, 65)] [COLOR=rgb(0, 0, 0)]type in <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">[ATTACH=full]264419[/ATTACH]
Let’s create a CSS file for our custom CSS.
From your main folder, enter the CSS folder and create a CSS file [COLOR=rgb(184, 49, 47)]styles.css
[COLOR=rgb(0, 0, 0)]Link the CSS file in between the head section of your HTML file like this <link rel="stylesheet" href="css/styles.css">. This should be after the Bootstrap CSS.
[ATTACH=full]264519[/ATTACH][ATTACH]264519[/ATTACH]
[COLOR=rgb(0, 0, 0)]and our code should now look like this.
[CODE=html]
Live Coding [/CODE]We are done with the head section of our web page for now. Next is the body of the website which contains all the information that will be visible on the site.
after the [SIZE=5][/SIZE] closing tag, open a [COLOR=rgb(226, 80, 65)][SIZE=5][/SIZE] tag and close it the [COLOR=rgb(184, 49, 47)][SIZE=5][/SIZE] before the the [SIZE=5][/SIZE] closing tag. That is, the closing tag should be the second to last item in your HTML file.
Your code should now look like this:
[CODE=html]
Live Coding [/CODE]After this, let’s write some basic html codes in our body section.
to write a paragraph in HTML, open a paragraph tag
write your contents in-between the opening and closing tag
.for example
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eligendi aliquid corrupti.</p>
view the code in your browser it should display like this:
[ATTACH=full]264520[/ATTACH][ATTACH]264520[/ATTACH]
Let’s format the HTML paragraph with Bold, underline, italic, strike-through
<p><strong>is a bold sentence</strong> using <strong>STRONG</strong> opening and closing tag</p>
<p><u>This is an underlined sentence</u> using <strong>u</strong> opening and closing tag</p>
<p><i>This is an italize sentence</i> using <strong>i</strong> opening and closing tag</p>
<p> <strike>This is a striked-through sentence</strike> using <strong>strike</strong> opening and closing tag</p>
HOW TO WRITE HEADINGS IN HTML
There are six headings in HTML (h1 to h6), the smallest is h6 and the biggest is h1.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Your Site Should Now Look Like This:
[ATTACH=full]264529[/ATTACH]
Let’s dive into CSS and see how we can link our CSS code to HTML (remember our CSS file was linked into our html file in the section). First let’s style the entire body in our CSS file.
open your styles.css file in your text editor.
[COLOR=rgb(184, 49, 47)]body {
[COLOR=rgb(184, 49, 47)] [COLOR=rgb(0, 0, 0)]background-color : gray;
[COLOR=rgb(184, 49, 47)]}
The body is known as the SELECTOR, background-color is called DECLARATION, gray is called VALUE. The declaration and value is enclosed inside curly braces { }, and seperated by a colon : a CSS statement ends with a semi-colon ;
A look at our first CSS code.
body {
background-color: gray;
font-family: Arial, calibri, Helvetica;
font-size: 18px;
text-align: center;
color: white;
font-weight: bold;
}
Here’s How THE Site Should Look Like
[ATTACH=full]264543[/ATTACH]
- The background color of the entire body is set to gray.
- Font-family is set to 3 fonts, Arial, calibri and Helvetica based on precedence. The device first search for Arial, if not available, it search for calibri, if calibri is not available, if then search for Helvetica. Note: to use a font-family with more than one word like Times New Roman, you must put in inside double quotation => “Times New Roman”.
-
Font size in HTML is measured in Pixel (px) and Percentage (%): The base font size (default font size) is 14px. This implies that a font-size set to 125% will be 17.5px which is 125% of 14px.
-
Text-align pattern in HTML are left (default), center, right justify and inherit.
-
color in HTML can be in form of HEXADECIMAL codes or keyword. Example [COLOR=rgb(184, 49, 47)]color : #FF0000; (for red) or [COLOR=rgb(184, 49, 47)]color : red; [COLOR=rgb(0, 0, 0)]this applies to all colours background color, font color, border color etc.
below are some hexadecimal value for some top colors:
#000 - Black
#FFF - White
#00FF00 - Green
#0000FF - Blue
#FFFF00 - Yellow
#00FFFF - Lemon
#FF00FF - Pink
#C0C0C0 - Gray
[CENTER]STYLING TARGETED SECTIONS IN HTML USING CSS[/CENTER]
in your HTML file, type four paragraphs as shown below
[CODE=html]
Lorem ipsum dolor sit amet consectetur adipisicing elit. In mmet consectetur adipisicing elit. In mollitia id c
Lorem ipsum dolor sit amet consectetumet consectetur adipisicing elit. In mr adipisicing elit. Doloremquesapientequidem,quos.
Lorem ipsum dolor sit amet consectetur adipisicing elit em ipsum dolor sit amet consectetur adipisicing elit. Aut perspiciatis cumque
Lorem ipsum dolor, sit amet consectetur adipislor, sit amet consectetur adipislor, sit amet consectetur adipisicing elit. Necessitatibus,
[/CODE]Let’s move to our CSS file for the styling.
p {
color: blue;
background-color: #fff;
font-family: 'lucida calligraphy';
font-size: 18px;
text-align: left;
}
[CENTER]HERE’S HOW YOUR WEB PAGE SHOULD LOOK[/CENTER]
[ATTACH=full]264558[/ATTACH]
Recall, that our entire background-color was gray. We’ve now assign a background-color of white (#FFF) to all our four paragraphs p tags.
Observe that the second paragraph has a class attribute of ‘secondParagraph’, third paragraph has an id attribute of ‘thirdParagraph’ and so on.
Let’s target specific paragraphs based on the class or id.
[CODE=css]p.secondParagraph {
color: #ff0000;
background-color: khaki;
font-family: Algerian;
font-size: 18px;
text-align: left;
}
p#thirdParagraph {
color: #000;
background-color: silver;
font-family: Arial;
font-size: 18px;
text-align: center;
}
p#fourthParagraph {
color: green;
background-color: white;
font-family: Arial;
font-size: 20px;
text-align: left;
}[/CODE]
[CENTER]Here’s how your site should look[/CENTER]
[ATTACH=full]264567[/ATTACH]
Note: Class is referenced in CSS using . (dot) while id is referenced using # (harsh or pound sign).
to target an id=“secondParagraph” only in paragraphs, use [COLOR=rgb(184, 49, 47)]p#secondParagraph [COLOR=rgb(0, 0, 0)]but to target an id=“secondParagraph” in all the files, don’t include the p i.e [COLOR=rgb(184, 49, 47)]#secondParagraph. SAME RULES APPLIES IN CLASS.
[CENTER][SIZE=7]CSS MARGIN AND PADDING[/SIZE][/CENTER]
Using HTML5 section element, create four section with one paragraph each.
[CODE=html]
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus quas magni maiores ipsa, consequatur,
totam veniam pariatur ullam possimus ad voluptas dolores tempora corporis voluptates praesentium laudantium non eaque ea fugit beatae alias expedita optio!
Impedit corrupti obcaecati dolorem mollitia ea blanditiis. Ipsa porro sit aut rerum ex minima ad!
<section id="marginLeft">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus quas magni maiores ipsa, consequatur,
totam veniam pariatur ullam possimus ad voluptas dolores tempora corporis voluptates praesentium laudantium non eaque ea fugit beatae alias expedita optio!
Impedit corrupti obcaecati dolorem mollitia ea blanditiis. Ipsa porro sit aut rerum ex minima ad!</p>
</section>
<section id="marginBottom">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus quas magni maiores ipsa, consequatur,
totam veniam pariatur ullam possimus ad voluptas dolores tempora corporis voluptates praesentium laudantium non eaque ea fugit beatae alias expedita optio!
Impedit corrupti obcaecati dolorem mollitia ea blanditiis. Ipsa porro sit aut rerum ex minima ad!</p>
</section>
<section id="marginAuto">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus quas magni maiores ipsa, consequatur,
totam veniam pariatur ullam possimus ad voluptas dolores tempora corporis voluptates praesentium laudantium non eaque ea fugit beatae alias expedita optio!
Impedit corrupti obcaecati dolorem mollitia ea blanditiis. Ipsa porro sit aut rerum ex minima ad!</p>
</section>[/CODE]
[CENTER][SIZE=5]Let’s Style The CSS[/SIZE][/CENTER]
[CODE=css]#marginTop {
margin-top: 70px;
}
#marginLeft {
margin-left: 80px;
}
#marginRight {
margin-right: 60%;
}
#marginBottom {
margin-bottom: 120px;
}[/CODE]
[CENTER][SIZE=5]Here’s How Your Site Should Appear[/SIZE][/CENTER]
[SIZE=4][ATTACH=full]264578[/ATTACH][/SIZE]
[SIZE=5]Note: [/SIZE][SIZE=5]Observe that #marginRight is measured in percentage (%). It’s best to use percentage when working with the width of a page (Left and Right Side). 60% margin simply means, that the margin should take 60% of the page width.[/SIZE]
[CENTER][SIZE=5]HOW TO WRITE MARGIN USING THE SHORT WAY[/SIZE][/CENTER]
#section {
margin: 2px 4px 8px 12px;
}
The code above implies:
[ul]
[li]2px - margin-top[/li][li]4px - margin-right[/li][li]8px - margin-bottom[/li][li]12px - margin-bottom[/li][/ul]
A more simpler way
#section {
margin: 10px 20px;
}
The code above implies:
[ul]
[li]10px - margin (top and bottom)[/li][li]20px - margin (left and right)[/li][/ul]
[ATTACH=full]264606[/ATTACH]
Vipi msee youtube ama twitch channel halafu watu wanabook
English please?
PADDING: Padding is similar to margin except that padding is the space inside a container or element while margin is the space outside a container or element.
[CODE=html]
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus quas magni maiores ipsa, consequatur,
totam veniam pariatur uium laudantium non eaque ea fugit beatae alias expedita optio!
Impedit corrupti obcaecati dolorem mollitia ea blanditiis. Ipsa porro sit aut
<p id="paddingRight">
totam veniam pariatur ullam possimus ad voluptas dolores tempora corporis voluptates praesentium laudantium non eaque ea fugit beatae alias expedita optio!
Impedit corrupti obcaecati dolorem mollitia ea blanditiis. Ipsa porro sit aut rerum ex minima ad!</p>
<p id="paddingLeft">
totam veniam pariatur ullam possimus ad voluptas dolores tempora corporis voluptates praesentium laudantium non eaque ea fugit beatae alias expedita optio!
Impedit corrupti obcaecati dolorem mollitia ea blanditiis. Ipsa porro sit aut rerum ex minima ad!</p>
<p id="paddingBottom">
totam veniam pariatur ullam possimus ad voluptas dolores tempora corporis voluptates praesentium laudantium non eaque ea fugit beatae alias expedita optio!
Impedit corrupti obcaecati dolorem mollitia ea blanditiis. Ipsa porro sit aut rerum ex minima ad!</p>[/CODE]
[CODE=css]#paddingTop {
padding-top: 50px;
}
#paddingRight {
padding-right: 30%;
}
#paddingLeft {
padding-left: 30%;
}
#paddingBottom {
padding-bottom: 40px;
}[/CODE]
[CENTER][SIZE=5]YOUR WEB PAGE SHOULD LOOK LIKE THIS[/SIZE][/CENTER]
[ATTACH=full]264663[/ATTACH]
Oh, i get you now, you asked:
How about youtube or twitch channel and then the people on the block
My videos are in progress at the studio.