Lab 4: Basic HTML, CSS, and JavaScript
Background:
This lab focused on practicing basic functions of HTML (Hypertext Markup Language), CSS (cascading style sheets), and JavaScript, all working together to form a basic website. HTML was first written, then CSS styling was added, then JavaScript was added last to provide extra functionality. Two webpages were created. One was created using instructions on how to code, and the next was a practice of creative use of the functions demonstrated in the first code.
Methods:
Part 1: Developing HTML
Part 1 is focused on creating the HTML portion of the website. The completed HTML code for the site is shown below. Some portions of this code will be talked about later as they refer to the CSS and JavaScript aspects of the webpage.
The HTML document was created in Notepad++ and stored in its permanent location on the deployment server. The code opens with the document type, which is a marker that the Notepad++ application reads to know that it will be creating an HTML 5 document. Next, the code is opened with an HTML tag (<html>), then under a head tag, the webpage title is defined in title tags. Notice that indentation is used so that the document appears orderly, and is easy to interpret by another developer, or by oneself later on. The webpage title is what is displayed on the tab or window bar of a webpage:
. The body tag now leads, opening the body section of the web page, and a wrapper division and a contained header division begin. Theses are both given identifications as they will need to be referred to later on in the CSS document for styling. All identifications and other variables created do not start with a capital and if there is another word in the title the title will take on a camelCase for the sake of consistency. In the header the logo image that is meant to be displayed is called, with its source (src) file set, and its orientation set, putting it at the right side of the screen. Next, three heading tags (with different numbers correlating to different sizes) are used in order to place the text in the header. The header division is now closed with a closing div tag (</div>).
A new division tag is now called beginning the main section of the HTML document and webpage. Text is entered into two separate <p> tag lines (paragraphs) telling the user about the webpage, and then a form is defined. The entire form section is separated from the rest of the code by form tags. Three different parts of the form are defined inside the form tags. First, the label "for" the input box (going in front of the input box) is defined, then the input box is created with type "text", then the input button is created with type "submit." A break is inserted after the box in order to put the button for submission under the box, and this line of code is written on a new line in order to help a reader of the HTML code understand what is being accomplished.
A new paragraph is now used to create a title for the list that is below. The strong tags used inside the new paragraph tags make the text bolded. An unordered list is then created below the title. This is done with a ul tag. Each item on the list is then called with a li tag.
Next another title is created for the division that was created thereafter for the JavaScript functionality demo on the site. This division is referred back to in the JavaScript file for the display of the results that were created using JavaScript. The identification of this division is very important in the reference of the division.
The code is used throughout the html file to create a non-breaking space. This means it is simply a space, and does not create a break to the next line like a <br> tag would create.
After a title, a hyperlink is created to the web application whose photo is shown after. The hyperlink links to the webpage of this application, however the text which links there is not the text of the URL of the site. The text is simply "application." The text of the sentence before abruptly ends, and then an opening <a> tag is defined with the URL, after which comes the text, "application," and then the closing </a> tag. The page comes to an end with two division showing the date last updated and giving credit where due.
Part 2: CSS Styling
The next part of the lab focused on creating a style sheet for the html page previously developed. The CSS file is referred to in the HTML code just below the web page title. CSS uses a method of calling a selector, then inside the curly brackets different properties are defined. In this example of CSS, the element and id selector types are used. Body, and img are examples of element selectors, and all of the rest of the selectors (beginning with #) are id selectors. Body refers to all of the body, and img refers to all images. The id selectors refer to specific parts of the page, usually divisions, that have identifications defined in html. The "div#footer a" selector refers to the link that is included in the footer, which is not already referred to with the text color that is chosen in the footer selector section.
"background-color" refers to the background color. The color is chosen in hexadecimal, and hexadecimal colors can be found using many different color pickers available on the internet. If a hexadecimal color is searched in google, google will respond with a color picking mini-application.
"font-family" refers to the family of font that one would like viewers to see. Individual browsers and platforms will pick the most efficient and usually the same font from that family.
"width", "margin", and "padding" refer to spacing of the division. They can be understood by with the below figure.
"color" refers to the font color.
"float", and "clear" are used to make text and other elements display in appropriate areas. For example, with sidebar, it was desired to have the division sit to the right, and thus there is a "float: right;" line in the text. The "clear: both;" line in the footer defines that the section can have other sections float on either side of it. The "overflow: auto;" line fixes a problem where elements overflow outside of the division they are drawn in. This line expands the division to encompass all elements.
Text and other elements are measured in px (pixels), or with em (a change in size relative to the sizes of surrounding elements).
Part 3: Incorporating Simple JavaScript
JavaScript was added in this section as primarily a demo of how to add JavaScript, further JavaScript functionality will be explored in future labs. The JavaScript in this lab was extremely simple, and coded for the addition of text in a predefined section that was made into a differentiated box in CSS styling (resultsBox). In order to add JavaScript to the web page, the JavaScript file was first referred to in the HTML document. This was done at the very end of the code, outside of the body tags, but inside the HTML tags.
First a function is defined named writeResults which takes a result text parameter. The code contained creates an empty division, that refers to the division already setup in the html document. Then, it creates a new paragraph. After that, it creates text string based on the input parameter text. It now puts the text string in the paragraph, and it puts the paragraph in the division. The function is then called, putting the text desired into the result parameter box, which then places that resultant text into the div in the HTML document.
Part 4:
A customized web page for a hypothetical web GIS services company was created with the skill obtained by following steps 1-3. This webpage uses much of the same code as the first section, but with different key areas changed. Custom text, pictures, sizing, and colors were added. The code for this can be seen below.
Results:
Below are the results of the above coding. The first webpage is from part 1-3 and the second is from part 4. Visible are all elements of JavaScript, CSS, and HTML that have been coded to create one continuous webpage.
Sources:
Instructor Cyril Wilson provided instructions, help, and some files.
Sylvia Richardson via GitHub
W3 Schools
Methods:
Part 1: Developing HTML
Part 1 is focused on creating the HTML portion of the website. The completed HTML code for the site is shown below. Some portions of this code will be talked about later as they refer to the CSS and JavaScript aspects of the webpage.
The HTML document was created in Notepad++ and stored in its permanent location on the deployment server. The code opens with the document type, which is a marker that the Notepad++ application reads to know that it will be creating an HTML 5 document. Next, the code is opened with an HTML tag (<html>), then under a head tag, the webpage title is defined in title tags. Notice that indentation is used so that the document appears orderly, and is easy to interpret by another developer, or by oneself later on. The webpage title is what is displayed on the tab or window bar of a webpage:
. The body tag now leads, opening the body section of the web page, and a wrapper division and a contained header division begin. Theses are both given identifications as they will need to be referred to later on in the CSS document for styling. All identifications and other variables created do not start with a capital and if there is another word in the title the title will take on a camelCase for the sake of consistency. In the header the logo image that is meant to be displayed is called, with its source (src) file set, and its orientation set, putting it at the right side of the screen. Next, three heading tags (with different numbers correlating to different sizes) are used in order to place the text in the header. The header division is now closed with a closing div tag (</div>).A new division tag is now called beginning the main section of the HTML document and webpage. Text is entered into two separate <p> tag lines (paragraphs) telling the user about the webpage, and then a form is defined. The entire form section is separated from the rest of the code by form tags. Three different parts of the form are defined inside the form tags. First, the label "for" the input box (going in front of the input box) is defined, then the input box is created with type "text", then the input button is created with type "submit." A break is inserted after the box in order to put the button for submission under the box, and this line of code is written on a new line in order to help a reader of the HTML code understand what is being accomplished.
A new paragraph is now used to create a title for the list that is below. The strong tags used inside the new paragraph tags make the text bolded. An unordered list is then created below the title. This is done with a ul tag. Each item on the list is then called with a li tag.
Next another title is created for the division that was created thereafter for the JavaScript functionality demo on the site. This division is referred back to in the JavaScript file for the display of the results that were created using JavaScript. The identification of this division is very important in the reference of the division.
The code is used throughout the html file to create a non-breaking space. This means it is simply a space, and does not create a break to the next line like a <br> tag would create.
After a title, a hyperlink is created to the web application whose photo is shown after. The hyperlink links to the webpage of this application, however the text which links there is not the text of the URL of the site. The text is simply "application." The text of the sentence before abruptly ends, and then an opening <a> tag is defined with the URL, after which comes the text, "application," and then the closing </a> tag. The page comes to an end with two division showing the date last updated and giving credit where due.
Part 2: CSS Styling
The next part of the lab focused on creating a style sheet for the html page previously developed. The CSS file is referred to in the HTML code just below the web page title. CSS uses a method of calling a selector, then inside the curly brackets different properties are defined. In this example of CSS, the element and id selector types are used. Body, and img are examples of element selectors, and all of the rest of the selectors (beginning with #) are id selectors. Body refers to all of the body, and img refers to all images. The id selectors refer to specific parts of the page, usually divisions, that have identifications defined in html. The "div#footer a" selector refers to the link that is included in the footer, which is not already referred to with the text color that is chosen in the footer selector section. "background-color" refers to the background color. The color is chosen in hexadecimal, and hexadecimal colors can be found using many different color pickers available on the internet. If a hexadecimal color is searched in google, google will respond with a color picking mini-application.
"font-family" refers to the family of font that one would like viewers to see. Individual browsers and platforms will pick the most efficient and usually the same font from that family.
"width", "margin", and "padding" refer to spacing of the division. They can be understood by with the below figure.
"color" refers to the font color.
"float", and "clear" are used to make text and other elements display in appropriate areas. For example, with sidebar, it was desired to have the division sit to the right, and thus there is a "float: right;" line in the text. The "clear: both;" line in the footer defines that the section can have other sections float on either side of it. The "overflow: auto;" line fixes a problem where elements overflow outside of the division they are drawn in. This line expands the division to encompass all elements.
Text and other elements are measured in px (pixels), or with em (a change in size relative to the sizes of surrounding elements).
Part 3: Incorporating Simple JavaScript
JavaScript was added in this section as primarily a demo of how to add JavaScript, further JavaScript functionality will be explored in future labs. The JavaScript in this lab was extremely simple, and coded for the addition of text in a predefined section that was made into a differentiated box in CSS styling (resultsBox). In order to add JavaScript to the web page, the JavaScript file was first referred to in the HTML document. This was done at the very end of the code, outside of the body tags, but inside the HTML tags.
First a function is defined named writeResults which takes a result text parameter. The code contained creates an empty division, that refers to the division already setup in the html document. Then, it creates a new paragraph. After that, it creates text string based on the input parameter text. It now puts the text string in the paragraph, and it puts the paragraph in the division. The function is then called, putting the text desired into the result parameter box, which then places that resultant text into the div in the HTML document.
Part 4:
A customized web page for a hypothetical web GIS services company was created with the skill obtained by following steps 1-3. This webpage uses much of the same code as the first section, but with different key areas changed. Custom text, pictures, sizing, and colors were added. The code for this can be seen below.
Results:
Below are the results of the above coding. The first webpage is from part 1-3 and the second is from part 4. Visible are all elements of JavaScript, CSS, and HTML that have been coded to create one continuous webpage.
Sources:
Instructor Cyril Wilson provided instructions, help, and some files.
Sylvia Richardson via GitHub
W3 Schools
Comments
Post a Comment