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 VECTOR An array is of fixed size, C++ doesn't have inbuilt function to add elements to or delete element from an array (Except you use cin and declare variable to store elements to be added to the end (rear) of the existing elements), and array cannot handle data dynamically. Vector comes into the picture to solve the deficiency of array. A vector is a dynamic array that can change in size during runtime, hence vector  has dynamic/heap memory allocation and handles memory management. You need to add the header file of a vector to your program: #include<vector> Vector operations The following are the basic functions we can perform on a vector: add, access, change and remove elements Vector Inbuilt functions  The following are functions that can be used to perform several operations on a vector which are obtained from C++ STL (Standard Template Library) front() returns the first element of the vector back() returns the last element o
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 for css: type ha
Read more