Technical Report: Web Development using HTML, CSS, JavaScript
VerifiedAdded on  2023/06/13
|17
|3450
|79
Report
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.
1Web Development Documentation.
WEB DEVELOPMENT DOCUMENTATION.
by (Name)
[Name of Class (Course)]
[Professor’s Name (Tutor)]
[School Name (University)]
[City And State Located]
[Date]
WEB DEVELOPMENT DOCUMENTATION.
by (Name)
[Name of Class (Course)]
[Professor’s Name (Tutor)]
[School Name (University)]
[City And State Located]
[Date]
Paraphrase This Document
Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
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
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>
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>
⊘ This is a preview!⊘
Do you want full access?
Subscribe today to unlock all pages.
Trusted by 1+ million students worldwide
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>
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>
Paraphrase This Document
Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
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.
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
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
⊘ This is a preview!⊘
Do you want full access?
Subscribe today to unlock all pages.
Trusted by 1+ million students worldwide
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.
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.
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 .
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 .
⊘ This is a preview!⊘
Do you want full access?
Subscribe today to unlock all pages.
Trusted by 1+ million students worldwide
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;
}
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;
}
Paraphrase This Document
Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
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;
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;
}
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;
}
⊘ This is a preview!⊘
Do you want full access?
Subscribe today to unlock all pages.
Trusted by 1+ million students worldwide
1 out of 17
Related Documents
Your All-in-One AI-Powered Toolkit for Academic Success.
 +13062052269
info@desklib.com
Available 24*7 on WhatsApp / Email
![[object Object]](/_next/static/media/star-bottom.7253800d.svg)
Unlock your academic potential
Copyright © 2020–2025 A2Z Services. All Rights Reserved. Developed and managed by ZUCOL.