lecture 2

• Text editors


  Similar to a word processing program, but lacks most text formatting features
• Code editor


  A type of text editor that contains additional features to help web developers write code
• Text editors


  • Notepad
  • TextEdit
  • Brackets
• Content Management Systems


  Manages the publishing, modification, organization, and access of various forms of documents and other files on a network or the web
• Web developer


  Creates a theme, and one or more website content administrators enters the content
• Content Management System


  • WordPress
• Hypertext Markup Language (HTML)


  Uses a set of codes called tags to format documents for display in a browser

  
• Cascading Style Sheets (CSS)


  Contains specifications for the fonts, colors, layout, and placement of HTML elements on a webpage

  
• JavaScript


  A programming language for creating programs that a browser can run to generate content for a website
• A webpage's source code contains text marked up with HTML tags that instruct a browser how to display that content

  
• The World Wide Web Consortium (W3C) oversees the specification of HTML Standards
• The W3C provides a free, online HTML5 validator application to ensure that a webpage's HTML tags follow the specifications, or rules, for HTML5

  
• Creating the index.html File

  1. Run the text editor

  2. Navigate to and open the template.html file

  3. Enable the word wrap feature

  4. Save the file using the file name, index.html

  
• Copying the Starter Text from a Source File and Pasting It in the index.html File

  1. Open the startertext.txt file

  2. Select all the text

  3. Copy the text

  4. Close the startertext.txt file

  5. Position the insertion point in the index.html file

  6. Paste the text

  
• Webpage Title


  Specified between the <title> and </title> tags

  
• Headings


  Indicate the different sections of a webpage, identified by the tags <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>

  
• Specifying the Headings in the index.html File

  1. Position the insertion point at the beginning of the heading

  2. Type <h1> or <h2> to identify the heading

  3. Position the insertion point at the end of the heading

  4. Type </h1> or </h2> to identify the end of the heading
• Paragraphs


  Identified using the <p> and </p> tags
• Identifying the Paragraphs in the index.html File

  1. Position the insertion point at the beginning of the paragraph

  2. Type <p> to indicate the start of the paragraph

  3. Position the insertion point at the end of the paragraph

  4. Type </p> to indicate the end of the paragraph

  
• Images


  Stored in files located on a web server, referenced in HTML using the <img> tag

  
• Inserting Images in the index.html File

  1. Position the insertion point before the paragraph after the heading

  2. Type <img src="images/image_file.png" alt="Alternate Text" style="float:left/right"> to insert the image

  
• Inserting Images in the index.html File


  1. Locate the <h2>CSS</h2> heading

  2. Type <img src="images/css_image.png" alt="CSS Image" style="float:right">

  3. Locate the <h2>JavaScript</h2> heading

  4. Type <img src="images/js_image.png" alt="JavaScript Image" style="float:left">

  5. Save the changes to the index.html file

  6. Refresh or reload the webpage in the browser window to verify the changes are displayed properly

  
• Link


  Text or an image in a webpage that a user clicks to navigate to another webpage, download a file, or perform another action
• Inserting a Link with an Absolute Reference


  1. Type <a href="http://www.w3.org/html/logo" target="_blank">

  2. Type </a>

  3. Type <a href="http://www.w3.org/Style/Examples/011/firstcss" target="_blank">

  4. Type </a>

  5. Type <a href="http://javascript.com" target="_blank">

  6. Type </a>

  7. Save the changes to the index.html file

  8. Refresh or reload the webpage in the browser window to verify the changes are displayed properly
• Creating the video.html File

  1. Open the template.html file

  2. Save the file with the file name, video.html

  3. Type Video Page between the <title> and </title> tags

  4. Save the changes to the video.html file

  
• Inserting a Link with a Relative Reference


  1. Type <a href="video.html">

  2. Type </a>

  3. Save the changes to the index.html file

  4. Refresh or reload the webpage in the browser window to verify the changes are displayed properly

  
• Unordered list


  A list where the order of the items is not important
• Ordered list


  A list where the order of the items is important
• Formatting Items in an Ordered List

  1. Change the first <p> to <ol> and the corresponding </p> to </ol>

  2. Type <li>

  3. Type </li>

  4. Insert the remaining list items, typing the <li> and </li> tags

  5. Adjust the line spacing and indentation

  6. Save the changes to the index.html file

  7. Refresh or reload the webpage in the browser window to verify the changes are displayed properly

  
• Embedded styles

  Styles defined in the head section of an HTML document that apply to the entire webpage

  
• Adding CSS to the index.html File

  1. Position the insertion point at the end of the </title> tag

  2. Type the CSS code

  3. Save the changes to the webpage

  4. Refresh or reload the webpage in the browser window to verify the changes are displayed properly

  
• Adding a Custom Style to the index.html File

  1. Type <span class="fancy">

  2. Type </span>

  3. Save the changes to the index.html file

  4. Refresh or reload the webpage in the browser window to verify the changes are displayed properly

  
• JavaScript


  Code that can be added to HTML documents to enhance the webpage by adding interactivity or dynamic content

  
• Using JavaScript to Add the Current Date and Time

  1. Position the insertion point after the </style> tag

  2. Type the JavaScript code

  3. Position the insertion point immediately after the y in the <body> tag

  4. Type onload=showDateAndTime()

  5. Position the insertion point immediately after the last </p> tag

  6. Type the code to specify where to display the current date

  7. Save the changes to the index.html file

  8. Refresh or reload the webpage in the browser window to verify the changes are displayed properly

  
• When you locate a video on that you want to include on a webpage, YouTube provides HTML code you can use to add the video to the webpage
• Embedding a YouTube Video in the video.html Webpage

  1. Open a new browser tab and navigate to youtube.com

  2. Use the search box on the youtube.com webpage to locate a video about web development

  3. Locate the embed code

  4. Select the embed code in its entirety and then copy it to the clipboard

  5. Display the text editor containing the code for the video.html webpage
• Adding a YouTube Video to a Webpage

  1. Locate video on YouTube

  2. Copy embed code from YouTube

  3. Paste embed code into webpage
• Embedding a YouTube Video in the video.html Webpage


  1. Open YouTube

  2. Search for video

  3. Locate embed code

  4. Copy embed code

  5. Paste embed code into webpage
• Adding a Link Back to the index.html Webpage

  1. Add line break after embed code

  2. Add link to index.html
• Adding a Background Style to the video.html Webpage

  1. Position insertion point after </title> tag

  2. Add background style code