Basic Web Page - phase 1

By on

Objective:

-learn how to set up browser and editor for coding (to view window on both sides, let first window be active, hold down window key + right or left arrow)

-learn the basic structure of html

-learn structure of project files

-learn tags like h1-h6, p, a, img, ul, ol, hr, br

-learn css selectors class (dot), id (hash symbol)

NB: At least, one of your project files must have index.html

-to go on multiple pages, create the file name for index.html, services.html, about.html, contact.html

-paste the same code of index.html into other files, then edit the content you want it to have


Basic structure of HTML


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>


 <html>

    <head>

<title> Intro to Web Design</title>

<!--<link rel="stylesheet" href="style.css">-->


<style>

*{

margin: 0; padding:0;

box-sizing: border-box;

font-family: sans-serif;

}


.header{

padding: 0 70px;

display: flex;

align-content: center;

justify-content: space-between;

margin-top: 20px;

margin-bottom: 20px;


background-color: purple;

}


.header .logo{

width: 50px; height: 50px;

font-size: 3rem;

}


.nav{

display: flex;

align-content: center;

justify-content: center;

gap: 60px;

list-style-type:none;

}


.nav li a{

text-decoration: none;

color: black;

font-size: 1.2rem;

color: yellow;

border-left: 1px solid cyan;

}


/*change the link color on hover*/

.nav li a:hover{

background-color: red;

}




.b1{

margin-left: 100px;

margin-right: 100px;

}





<!--

nav{

height:100px;

background-color: purple;

}


nav ul{

list-style-type:none;

margin: 0;

padding: 0;

width: 100%;


/*fixed navigation*/

position: fixed;

/*top: 0;*/

width: 100%;

}


nav li{

float: right;

border-right: 1px solid cyan;

}


nav li a{

text-decoration: none;

display: block;

color: blue;

padding: 10px;

background-color: yellow;

}


/*change the link color on hover*/

nav li a:hover{

background-color: cyan;

}


/*create active link*/

active{

background-color: cyan;

}


-->


</style>


    </head>

    <body>

<div class="header">

<h2 class="logo">DMAC</h2>

<ul class="nav">

<li><a href="indexcaleb.html">Homepage</a><li>

<li><a href="services.html">Services</a><li>

<li><a href="about.html">About</a><li>

</ul>

</div>




       <!--para info--> 

<br>

            <section class="b1">

        the lord is good all the time to me all the time

    <h1 align="center">MY DEPARTMENT LANDING PAGE</h1>

    <hr width="70%">

    <blockquote>

        <p align="justify">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam libero, 


nulla ipsum, recusandae veritatis ipsa repellat dignissimos veniam eaque suscipit aperiam, ducimus 


magni accusamus quos assumenda laborum mollitia voluptas vero.</p></blockquote>

        <p>The Lord is <em>Good to me</em> All the time, and i cannot say it all</p>

        <p>The Lord is Good to me All the time, <br/> and i cannot say it all</p> 

        


    <h3>MY FAVOURITE FRIENDS</h3>

    <ul align="justify">

        <li>ade</li>

        <li>bola</li>

        <li>seun</li>

    </ul>

    

    <img src ="laspo.png">


        </section>

    

    <img src="images/img/but1.jpg" alt="laspotech logo" width="500" height="600">

   

    <a href="www.google.com"> CLICK HERE</a>

    </body>

</html>

Comments

Post a Comment

Popular posts from this blog

By on
Image
   DATA STRUCTURE WITH C++ PROGRAMMING USING STACK PREREQUISITES TO IMPLEMENTING STACK IN C++ We will need to understand how to use some of the constructs in C++ that makes up the implementation of stack in C++ against. And this concepts will also help you in developing other codes and to debug or understand the C++ codes in a company's code bank or to interpret a boiler plate code (a ready made code). Some of these constructs or concepts are: 1. sizeof() 2. Function 3. Pointer 4. Function Pointer 5. Arrow operator 6. malloc() 7. typedef 8. struct PHASE 1: sizeof() It is used to determine the size of variables used in a program, it can determine the size of primitive (or predefined) datatype too and for any user-defined datatypes. It is an inbuilt keyword and a compile-time operator. syntax-1 using variable sizeof(variableName); syntax-2 using primitive datatype sizeof(datatype); //code implementation #include<iostream> using namespace std; int main(){ //declare v...
Read more
By on
Image
 CGPA CALCULATOR & BASIC HTML WEB DEV PROJECT Introduction: In this cgpa calculator, user will enter the gp for each semester, then click on the submit button to see the cgpa user can also click the reset button to begin a new input for calculation In this mini project we will be using HTML CSS JAVASCRIPT to develop a cgpa calculator NB:   With a querySelector statement, you can select an element based on a CSS selector. This means you can select elements by ID, class, or any other type of selector. Using the getElementById method, you can only select an element by its ID. Generally, you should opt for the selector that most clearly gets the job done. PHASE 1a:  PROTOTYPE (final product) PHASE 1b:  PROTOTYPE (rought sketch) Let's sketch with our hand how the cgpa calculator will look like PHASE 2: Html (for structuring the webpage content) Shortcut for div and class for css: type dot followed by the name you want e.g .cgpatitle Shortcut for div and id f...
Read more