Introduction to make a website from scratch!!
HTML meaning Hypertext Mark-up Language is a web developer tool used to create the building blocks of a website. HTML, unlike other programming languages, does not involve any form of logic but simply renders text to be viewed by a browser, that is why it is referred to as a mark-up language.
HTML is written with what is referred to as elements on code editors and the output is viewed in browsers. These elements consist of opening and closing tags (or could be a self enclosing tag depending on the type), and the tags may contain attributes and attribute values.
<button id="button">Log In</button><button> and </button> are the opening and closing tags
id is the attribute
"button" is the attribute value
CSS means cascading Style Sheet. It is use to add designs to our HTML codes, giving our website its outlook. There are used to give HTML visual outlook that the user can relate with for proper navigation of the site. CSS codes for a page can be written in a separate file and named with “.css”, then linked with the HTML page in the head tag of the HTML page using the code <link rel=”stylesheet” href=”cssFileName.css”>. Or written on the same HTML page in an element <style></style>.
To write CSS codes, the element name is called in the CSS file or in the inline element <style>. also, id or class can be added to some elements to call specifics. Priority is placed on class over element style and id over class and element style. Only HTML style added to an element overwrites these CSS codes.
Id is called with #idName and class is called with .className.
Other tools used in web development is the java script (JS). JS is used to add functionalities to the website. Altogether, these tools are used by front-end developers to create a web page.
We would be coding briefly HTLM and CSS to create a web page such as a student login portal. The semantic of a page like this are usually not complex and requires only basic elements.
To begin, you need to create a header, main and footer elements in the body of the boilerplate. To establish the boilerplate in HTML5, you use the shortcut “! then tab” (this is after you have created a file named with “.html” in a folder created on the code editor). The header would contain the page logo and a navigation tab. The logo can be created with an anchor tag to serve as a link to reload the home page and an image nested in it
<a href="form.html" id="logo"><img src="img/img.jpg" alt="logo">Legacy Schools</a>The <nav> tag could be created to nest anchor tags for the desired pages such as; contact, about the author or institution, achievements and the likes. The header is then styled with CSS using codes as this
<header>
<a href="form.html" id="logo"><img src="img/img.jpg" alt="logo">Legacy Schools</a>
<nav>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Classes</a>
<a href="#">School Tour</a>
</nav>
</header>
header{
margin-top: 0px;
background: white;
width: 100%;
box-shadow: 0px 4px 5px 5px #444444a9;
display: flex;
}
img{
width: 50px;
height: 50px;
padding-left: 10px;
}
nav a{
margin: 0px 0px 0px 130px;a
color: cadetblue;
text-decoration: none;
}
#logo{
text-decoration: none;
color: black;
font-family: cursive;
font-size: 50px;
}
Next, in the <main>, a <form> tag is created. In the <form>, an <heading> tag is used to create the page topic which would be; student portal, login details etc. <input> tags are then used to create the text area for the user which are name, email, and password. A <button> is used to create the submit action. And attribute that says required is added to the inputs to ensure users fill in all the details before they can submit.
<input> and <button> are inline elements, that is, they are created on a straight line when viewed on the browser. Therefore, to make them block, they can be nested in a block element such as a <div>. <div> is a block element which help to give semantic meaning to our page
<div>
<input type="password" placeholder="password" id="password" required>
</div>
<div>
<button id="button">Log In</button>
</div>
In another <div> outside the form in the main, anchor tag, <a>, could be used to create a link for people who have forgotten their password and for those who are yet to register for the page.
In the footer, a region for message could be written for users to note using the paragraph tag, <p>. Also, a copyright sign could be added to the page using the code;
<footer>
<p id="footer-copyright">©2022</p>
</footer>
To style the form, it is given a border and border-radius (to curve the edges of the border). Also, you declare a display flex to justify the content center. Padding and margin are added to give shape to the border. Id is assigned to the input elements of name, email, and password and also the button and they are styled with padding and margin of their own. Padding and margin usually measure in pixels (px), em and percentage (%).
A design called hover in CSS can be added to our word. Hover is used to style links such that when the cursor points at the click, its outlook changes e.g. color change, size change etc. To make and hover, you write the element name or call the id or class :hover, then add the desired style
nav a:hover{
border-bottom: 3px solid ;
}
#logo:hover{
color: cadetblue;
}
Multiple element, class and id can be called together is they have the same styling.
#email, #submit{
border: none;
outline: none;
padding: 10px;
margin: 5px;
width: 30%;
}
This is to make our code DRY, that is, don't repeat yourself.
Now you can create a non-ambiguous website that is user interactive and the results can be sent to call information from a server which is handled and coded for by back-end developers.