Scribd
Upload
2 views7 pages

Lecture_4_Transcript

Lecture 4 covers the creation of a basic HTML page using a template file in Visual Studio Code. It explains the structure of the HTML document, including the <head> and <body> sections, and provides instructions for creating a personal home page with dynamic content using JavaScript. The lecture emphasizes the importance of saving modified files under different names and avoiding the use of 'innerHTML' for setting text to prevent security risks.

Uploaded by

tbosexr5x
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
2 views7 pages

Lecture_4_Transcript

Lecture 4 covers the creation of a basic HTML page using a template file in Visual Studio Code. It explains the structure of the HTML document, including the <head> and <body> sections, and provides instructions for creating a personal home page with dynamic content using JavaScript. The lecture emphasizes the importance of saving modified files under different names and avoiding the use of 'innerHTML' for setting text to prevent security risks.

Uploaded by

tbosexr5x
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 7

Lecture 4 Transcript

Slide 1

In the Lecture 4, “CodeExamples” folder open the file “BasicHTMLPage.html” in Visual Studio Code, “VS
Code.”

This is the basic HTML template you will use to create the HTML pages for the course. When you want
to create a new HTML page do the following:

 Open “BasicHTMLPage.html” in VS Code.


 Modify it as needed to create the new HTML page you want.
 When you want to save your work SAVE IT UNDER A DIFFERENT NAME! If you don’t save it
under a different name, you will overlay the template. In fact, you might want to save a backup
of the template just in case.

The first line of the template <!DOCTTYPE html> indicates that this is a “modern HTML” page so that the
browser knows how to parse it.

The two main sections of the page are:

 <head> which contains information about the document. Notice that the <style> tag is
contained in the <head>, the <style> tag contains information needed to build the document.
 <body> which contains the document itself.

The contents of the <title> tag is what will be displayed on the web browser tab for the page.

Unicode encoding is an international encoding standard by which each letter, digit, or symbols is
assigned a unique numeric value: “utf-8” is a way to encode Unicode text as binary data using from 1, to
4, bytes. The <meta charset=”utf-8”> entry tells the browser the encoding used for the page received
from the server.

© RIT 2020 P a g e |1 PLG-ISTE.340


Lecture 4 Transcript

You will notice that the <meta charset=“utf-8”> entry does not use the standard “/>” to close the
entry. This is because the entry does not represent an HTML element but rather information used
by the browser.

By the way, notice how comments are delimited in the <style>, <body>, and <script> tags.

Let us open the “BasicHTMLPage.html” in the browser, just double click on the file in the
“CodeExamples” folder and it should open in your default browser.

When your browser opens you will be presented with a blank web page. You will see the contents
of the <title> tag on the browser tab for the page but nothing else.

Open the browser “Developer Tools” window by typing “Ctrl + Shift + I” Click on the “Sources” tab
and then click on “BasicHTMLPage.html.” You will see the source code for the “template” page.

Nothing was displayed on the web page because we did not create any elements to be displayed.
However, the HTML code itself was loaded into the page which is what we would expect.

© RIT 2020 P a g e |2 PLG-ISTE.340


Lecture 4 Transcript

Slide 2

Open the ““BasicHTMLPage.html” and use it to create a simple “Home Page” for yourself.

 Change the text in the <title> tag to “My Home Page” or anything else you want to indicate
that this is a home page.
 In the <body> add an <h1> “heading” tag and enter some text to indicate that this is your
home page. There is no requirement that the text here be the same as in the <title> tag.
 Add one or two <p> paragraph tags describing something about yourself. Notice that I have
embedded an “<a>” tag in the second paragraph.

The <a> tag specifies a hyperlink which will link from the current web page to another web page. The
“href” attribute specifies the hyperlink while the text between the opening <a …> and the closing </a>
tag is what will actually be displayed in the web browser window as the hyperlink; for full details on the
<a> tag see: https://www.w3schools.com/tags/tag_a.asp

When you have finished creating your home page DON’T FORGET TO SAVE IT UNDER A DIFFERENT
NAME!

Let us open “MyHomePage.html” in our browser by double clicking on the file name in the
“CodeExamples” folder.

(next page)

© RIT 2020 P a g e |3 PLG-ISTE.340


Lecture 4 Transcript

This time we see a web page with content since we created some HTML elements.

Notice that the word “here” appears in blue and is underlined since it represents a hyperlink. Click on it
and you will be taken to the “RIT home page.”

Now let us modify the web page so that the person using the page can enter his or her name so that
under “My home page” it will read: “Hello, I am [name entered by user] and this is my home page.

To obtain the user’s name we can use the “window.prompt” command we saw in the last lecture.
However, before we start modifying code on “MyHomePage.html” we will make a copy of it for back up,
call it “MyHomePage1.html.” There is also an “html” file in the code folder named
“MyHomePage2.html” which is the code we will build from “MyHomePage1.html.” To make things easy
first open “MyHomePage1.html” in VS Code by double clicking on it in the list of “CODEEXAMPLES” on
the left.

Now, In the “CODEEXAMPLES” list right click on “MyHomePage2.html” and from the dropdown menu
click on “Open to the Side.”

This will give you a side-by-side listing of “MyHomePage1.html” and “MyHomePage2.html.”

© RIT 2020 P a g e |4 PLG-ISTE.340


Lecture 4 Transcript

VS Code will no look like this:

To make the screen easier to work with click on the “double folder” icon outlined in orange in the upper
left-hand corner of VS Code.

That will remove, temporarily, the list of “CODEEXAMPLES” on the left and provide more screen area.

The first thing we want to do is change the <p> element on line 12, on “MyHomePage1.html” from
“fixed text” to an empty <p> element so that we can dynamically build the text with the user’s name.
However, we also need to add an “id” to the <p> element so that we can get access to it in our
JavaScript code using “document.getElementById()” as we saw in the last lecture.

So, replace line 12, in “MyHomepage1.html” with line 12, in “MyHomepage2.html.” We now have a <p>
tag with no text and an “id” of “namePrompt.” This is the only change we must make in the <body> of
the web page. The rest of the work will be done by JavaScript in the <script> tag.

© RIT 2020 P a g e |5 PLG-ISTE.340


Lecture 4 Transcript

When the browser parses the page the last thing it will parse is the <script> block and the first
statement it will execute is the “window.prompt,” here written as “prompt” because the browser
recognizes “prompt” as a method of the “window” object. When the “prompt” is executed the browser
will display a window asking, “What is your name?” with a textbox for you to fill in with your name.

Upon entering your name and clicking “OK” it will assign the text you entered to the variable “myName.”

Next, we need to get an object element reference to the <p> element in which we want to write out the
text on line 12, of “MyHomePage1.html” substituting the value in “myName” for “Paul.” We use
“document.getElementById(‘namePrompt’) to set the variable “greeting” to the object element
reference of <p>, shown on line 19, of “MyHomePage2.html.”

Finally, we set the text we want to display in the <p> with the id of ‘namePrompt’ by using string
concatenation to insert the value of ‘myName’ into the text to be displayed as follows:

“Hello, I am “ + myName + “ and this is my home page.”

The exact statement for doing this is shown on line 20, of “MyHomePage2.html.” What is important to
notice here is that I am setting the text of the <p> element with the id ‘namePrompt’ using the
“textContent” property of ‘greeting.’

In looking through code examples on the Internet you will see that many of them set text for HTML
elements by using the “innerHTML” property of the element, e.g., ‘greeting.innerHTML=…’

NEVER USE INNERHTML to set text. It allows the injection of hostile scripts into the web page. We will
review this in detail in another lecture.

With the appropriate changes made to “MyHomePage1.html” save it and run it.

© RIT 2020 P a g e |6 PLG-ISTE.340


Lecture 4 Transcript

The remaining slides in the presentation are completely self-documenting so there is no more content in
the “Transcript.”

© RIT 2020 P a g e |7 PLG-ISTE.340

You might also like