Your All-in-One AI-Powered Toolkit for Academic Success.

+13062052269

info@desklib.com

Available 24*7 on WhatsApp / Email

Company

Tools

Support

Technical Report: Web Development using HTML, CSS, JavaScript

Verified

Added on 2023/06/13

AI Summary

This document provides a comprehensive overview of web development using HTML, CSS, and JavaScript, focusing on the elements and their functions within each language. The HTML documentation covers essential tags such as , , , , , , , , , , , , , headings ( to ), , , , , , , , , and . Each element is explained with its purpose and usage in creating a webpage structure. The CSS documentation details styling properties like background-color, position, text-align, width, margin, clear, top, padding, border-color, display, height, font-size, and padding-left, illustrating how these properties are used to control the visual presentation of the website. The JavaScript documentation briefly mentions its role in client-side scripting, connecting to external script files, and validating input values. The document serves as a reference for understanding the fundamental aspects of web development, offering insights into how HTML, CSS, and JavaScript work together to build a functional and visually appealing website.

Contribute Materials

Your contribution can guide someone’s learning journey. Share your documents today.

1Web Development Documentation.
WEB DEVELOPMENT DOCUMENTATION.
by (Name)
[Name of Class (Course)]
[Professor’s Name (Tutor)]
[School Name (University)]
[City And State Located]
[Date]

Secure Best Marks with AI Grader

Need help grading? Try our AI Grader for instant feedback on your assignments.

2Web Development Documentation.
Table of Contents
WEBSITE DOCUMENTATION USING HTML,CSS,AND JAVASCRIPT................................3
HTML DOCUMENTATION..........................................................................................................3
CSS DOCUMENTATION..............................................................................................................8
JAVASCRIPT DOCUMENTATION...........................................................................................15
REFERENCES..............................................................................................................................17

3Web Development Documentation.
WEBSITE DOCUMENTATION USING HTML, CSS,AND JAVASCRIPT.
Autism Friendly Architecture is a website designed to illustrate the various aspects used in the
web designing and to demonstrate the use of professionalism using the various techniques of web
development.
In this website documentation there is analysis of use of The HTML,CSS and JAVASCRIPT
programming languages where the various elements used will be discussed and their use in the
implementation of the website.
Below is the various languages used and the use of the elements.
HTML DOCUMENTATION.
In this website there are various elements of The html language that were used and they have
unique purpose as discussed below.
The Doctype html tag.
<! DOCTYPE html>
The above is the type of the tag that is used to give the formal definitions of HTML5 to enable
the use of the html5 syntax in the webpage documents and enable compatibility of various web
browsers.
The html lang tag
<html lang="en">
The html tag is the tag that marks the beginning of the webpage ,the attribute html lang is used in
the web pages to do declaration of the type of languages to be used in the entire WebPages
sections and this helps the browser and the search engine while loading the webpage
(MacDonald, 2015).
The head tag.
<head> head part </head>

4Web Development Documentation.
The above is the head tags element that has both opening and closing tags ,this element is used to
act as a container of other elements which includes document’s title ,script, the style and meta
elements.
The title elements .
<title>the title </title>
The above is the title element that had been used in the webpages and its is put inside the HTML
element ,this elements provides the definition on the toolbars of the loading browser and is used
to give the web page title when it is loading on the browser.
The meta element.
<meta content="width=device-width, initial-scale=1" name="viewport">
The above is the illustration of the meta element which is mainly used to provide the metadata
details of the web page which include the descriptions of the pages the width of the screen of the
device.
The link element.
<link href="css/style.css" rel="stylesheet" type="text/css">
The above is the link tag that was used to do linking of the html page with other resources
externally located ,this tag is used to link the cascading style sheet from the external source file
(Matthew, 2014).
The script element .
<script src="js/menu.js"> javascript </script>
The above is the script element that is mainly provides a script on the side of the client the script
tag in this case had been used to connect the externally located script file using the src attribute.
The body element.
<body> Body Tag</body>

Secure Best Marks with AI Grader

Need help grading? Try our AI Grader for instant feedback on your assignments.

5Web Development Documentation.
The above is the body element that had been used and is mainly used in definition of the entire
webpage body this will also contain the various html contents like the
images,texts ,hyperlinks,forms,divs,lists and list items.
The div elements.
<div > div tags </div>
The above is the div tag and had been used to act as a container that had been used in division of
the entire html document and also assists in encapsulation of the various page elements and it
also applies css styles to the page elements.
The a href elements.
<a href=" "> linking tags </a>
The above a element had been used to enable the creation of links to other pages of the website.
The button element.
<button class=" "> button tags </ button>
The above is the button element that is located in the <button> tags and it can use texts or the
image and this specified the action done when clicked.
The I element
<i class=" "> italics tags</i>
The above is the I element within the tags and this is mainly to do display of the italic texts .
The img elements.
<img alt=" " class=" " height=" " src=" " width="600">
The above is the img element and it uses another attribute src that hold the image source and
URL ,therefore browser loads getting image from the source and attach it on the webpage using
the img element.

6Web Development Documentation.
The h1,h2,h3 and h4 header element.
<h1> header one tags </h1>
<h2> header two tags </h2>
<h3> header three tags </h3>
<h4> header four tags </h4>
The above are the header h1 ,h2,h3 and h4 elements and they are used to define posts titles or
even texts that need emphasis in the web pages ,the h1 has the largest text, however the other h2,
h3 and header h4 varies in size in descending order where the h4 end up being the smallest in
size.
The p paragraph element.
< p > paragraph tags </p>
The above is the p element that had been used in the various web pages ,this tag is used in the
definition of the documents paragraphs ,there are spaces and margins that are automatically
added by the browser while loading the web page ,the paragraph are also easily modified using
the css styles to specify the margins of the page.
The form elements
<form method="post"> form tags</form>
The above is the used form element and this is used in the website to allow the entry of data
details which can be submitted using the submit button ,the form hold various elements which
includes text fields,and submit buttons.
The input elements .
<input name=" " placeholder=" " required="" type="text" value="">
The above are the input attributes and they are within the <input> tag element ,the element had
been used in the web page form to represent the text fields and the submitting buttons ,however

7Web Development Documentation.
this element had been used with the JavaScript that validate the values inputs while submitting
values.
The break br element.
<input name="submit" type="submit" value="LOGIN"><br>
The above is the br element that had been used in the web pages ,this is used to break the lines in
the texts and form and tables elements .
The fieldset elements.
<fieldset> field set tags</fieldset>
The above is the field set element and is used in the form in the web pages to form a simple box
that groups the related form elements.
The label elements.
<label class=" ">label TAGS</label>
The above is the label element that had been used in the form and they are mainly used to label
the form input elements and therefore the id attributes for both the label and the input are same
and equal.
The ul elements.
<ul>un ordered list tags</ul>
The above is the ul element that had been used in the website and it is used to define the un-
ordered list using bullets and also they are used to contain the li elements that forms a the list.
The li elements.
<li class=" "> list items tags</li>
The above is the li element that had been used to hold the items to be displayed in the un-ordered
list that is used in the web pages to display the list of items.

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser

8Web Development Documentation.
The footer elements.
<footer>footer tags</footer>
The footer element is used to indicate the footer of the web page this element had been used to
hold other elements like the elements that forms the hyperlink to the social media like the
facebook and twitter.
CSS DOCUMENTATION.
This is the styling language which is used to position the various web pages items in the
desirable positions ,it also give the text colors ,backgrounds images and colors, hypertext images
and menus design .
Below are the various css elements that were used in the website design process and their
functions.
Use of background-color
Background-color: #e3f1f0;
The above is the use of background color element this is used in the website css file to set back
color of the entire web page.
Use of Position element
Position: relative;
The above is the position element that is used to do the positioning of the body elements ,the
element used is the relative position although other values can be used like the static, absolute,
fixed or even sticky.
Use of text-align elements.
Text-align: center;
The above is the text align element that is used to position the text in the html components like
the paragraphs or headers, for the case of the web pages the text will be centered.

9Web Development Documentation.
Use of width element.
width: 600px;
The width element had been used in setting of the html form elements.
The use of margin elements.
margin: 0 auto;
The margin is the property that is used to ensure there is a space around the body element and the
margins are set 0 and auto in all sides on top ,right ,bottom and left.
The use of clear property.
clear: both;
The above is the clear property used in the css this is used to show the directions for the floating
of the web page elements and in this case the both float right and left are allowed.
The use of to property
top: 25px;
The top element had been used in the website to place the elements in vertical format and this
enable the element to be positioned on the top of the containing elements like the body and the
div elements.
The use of padding-top and bottom element.
Padding-top: 50px;
The padding-top element sets content and the borders of the elements and thus the elements are
set to have a space on the top border with 50px.
However the padding-bottom is the element that is used to set the spaces between the html
elements and the bottom part borders where the space is set to be 50 px as well.
Below is the sample codes with the above css elements .

10Web Development Documentation.
body {
background-color: #e3f1f0;
position: relative;
text-align: center;
width: 600px;
margin: 0 auto;
clear: both;
top: 25px;
padding-top: 50px;
padding-bottom: 100px;
}
Use of border-color.
#logo img {
border-color: #e3f1f0;
}
The above is the border-color property that is used to set the color to the border elements in the
html elements ,the color set is combination of the four primary colors ,however the above
element of border-color set uniform color to all sides of the borders.
Use of the display property.
.section {
display: inline-block;
}

Secure Best Marks with AI Grader

Need help grading? Try our AI Grader for instant feedback on your assignments.

11Web Development Documentation.
The above is the sample display property and it is used to give the specification of the type of the
display including inline-block that set the display to be inside the page elements like the body or
divs (Mcfarland, 2013).
The use of height properties.
Height: 40px;
This is the css property that had been used to set the height of some elements like the div ,tables
and forms ,the height is therefore set in terms of pixels for this case will be 40px and this will
allow the contents in the elements display efficiently.
The use of the margin-bottom elements.
Margin-bottom: 15px;
The margin-bottom element is used to set the space between element and the borders on the
lower side of the borders.
Use of font-size property
font-size: 15px;
The above is the font-size element that is used to set the size of the text in the web page elements
,the font is set in terms of pixels and this ensures the proportionality of the text in various
devices.
Use of border property
border: 1px solid #000;
The above is the use of the border this property is used to set the limit of some elements in the
webpage ,the width and the color of the borders as well.Therefore the border is able to set the
border width,styles and color using the border property above.
The use of padding-left properties.
Padding-left: 45px;

12Web Development Documentation.
The padding property is used to set the space on the left side of the element and the border and
therefore the padding-left was used to create the left space of 45px.
Below is the block of code used to illustrate the above css properties.
.section input[type="text"], input[type="password"] {
height: 40px;
margin-bottom: 15px;
font-size: 15px;
border: 1px solid #000;
padding-left: 45px;
}
Use of color property
.section input[type="submit"] {
Color: #fff;
} (David, 2013).
The above is the color property used in the css and is used to give the form element color
specifically the submit button.
The use of text-decorations property.
.section a {
text-decoration: none;
}

13Web Development Documentation.
The above show use of text-decoration property is used to show the decorative property of the
web documents which includes the lines but in this case the text decoration is set to be none.
Use of the overflow properties.
Overflow: hidden;
.navbar {
overflow: hidden;
}
The above is the over flow property that is used to give specifications incase the contents in the
elements is too much ,for this case the overflow is set to be hidden when the contents happens to
be too much to fit the element.
Use of float property.
.navbar a {
float: left;
}
The above is the float element that specifies the location of the element ether in the left of the
container where the texts and in-line elements tend to wrap around the element on the menu
section.
Use of outline property.
.dropdown .dropbtn {
outline: none;
}

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser

14Web Development Documentation.
The outline property is used to indicate the type of lines that are drawn on the outer part of the
borders giving the width, styles and color values but for this case no outline element is set and it
is none.
Use of min-width property.
.dropdown-content {
min-width: 122px;
}
The above is the min-width element that is used to define the least width of a given element but
the set width don’t affect the width of website even if the device width is less than min width
and therefore it is set to be 122px.
Use of line-height property.
#content h3 a {
line-height: 36px;
}
The line-height is a property that is used to specify the spaces in element’s above and below
sides and this is set to be 36px.
Use of font-weight property.
#content h3 a {
Font-weight: bolder;
}
The above is the font-weight is the css property and had been used to set the boldness in the
webpage fonts sizes and this specified depending with the type of used font families.

15Web Development Documentation.
JAVASCRIPT DOCUMENTATION.
In this case the JavaScript was used where it was integrated with the html codes where it
performed some functions like menu alignment and the registration form validation.
Below are some of the elements used in the JavaScript and how they are used in the website
designing.
Use of function ().
window.onload = function() {}
The above function is used in the website design and is a procedure that was used to perform the
validation tasks of the email and passwords and to set color of the text entered in the text fields,
however the functions are then called in the html page form.
Use of Getelementbyid method.
var nameField = document.getElementById("name");
The above is a Getelementbyid() method and itb had been used to return the element namefield
which has the id attribute called name, this is used to do validation of the name value entered in
the web page form (DAN, 2015).
Use of Variables declarations.
var emailField;
var nameField;
The above are the variables that are used in the JavaScript file that is linked to the web pages,
these variables are assigned the values entered in the web page form which are validated against
the web form values.
Using className variables.
if (x.className === "navbar") {
x.className += " responsive";

16Web Development Documentation.
} else {
x.className = "navbar";
}
The above is the section of javascript code where the classname element is used these is assigned
to the certain webpage elements on the menu bar to make the website responsive.
Using the variable value.
if (nameField.value == "") {
nameField.value = "your name";
namefield.style.color = "#666";
} (Andya, 2012).
The above are the variable value element that had been used in the website javascript and it is
used to compare the value of the text field and if empty the user require re-entering the name
value again and the field set a certain color.

Secure Best Marks with AI Grader

Need help grading? Try our AI Grader for instant feedback on your assignments.

17Web Development Documentation.
REFERENCES
MacDonald,M.(2015).Creating a Website-The Missing Manual. New York, U.S.A:
O’Reilly,pp.56-630.
Matthew,M. (2014).HTML 5 - The Missing Manual. New York ,U.S.A: O’Reilly,pp.89-
690.
McFarland,S.(2013).CSS 3 - The Missing Manual.New York ,U.S.A: O’Reilly,pp.250-365.
David,S.(2013).Javascript The Missing Manual. New York,U.S.A: O’Reilly,pp.131-352.
Dan,C.(2015).Web Standards Solutions . New York, United states :Appress
publisher,pp.320-465.
Andya,B.(2012).CSS Mastery. New York, United states : Appress publisher, pp.52-489.