CS 511- Web Engineering

Week 2

Topic 19-20

CS 511-Week 2 : Topic 19-20
CS 511-Week 2 : Topic 19-20


Topic 19:

HTML Semantic Structuring:

HTML semantic structuring means a web page rather than making it look pretty.
<p> tags have both semantic and presentational value.
<b> and <I> tags do not have any semantic value.
Semantic HTML tags include:
  • <h1> - <h6>
  • <blockquote>
  • <code>
  • <em>
Advantages of Semantic Structuring:
  1. Maintainability
  2. Performance
  3. Accessibility
  4. Search Engine Optimization
Header Tag:
Header tags include
  • Logo
  • A search engine
  • Navigational connections
  • .....
The Header tag contains both opening<h> and closing </h> tags and content is written between these tags.

Footer Tag:
This element contains the following:
  • Copyright
  • Authorship
  • Contact information
  • Related documents
  • Sitemap
  • back to top links
The Footer tag contains both opening<f> and closing </f> tags and content is written between these tags.
Some useful tags are:
  • Navigation Tag
  • Article Tag
  • Section Tag
  • Figure Tag
  • Caption Tag
Assessment:
  • When a webpage is requested,__________
    1. Firstly, an empty page is fetched
    2. Firstly, HTTP contents are fetched
    3. Firstly, HTML contents are fetched
    4. Firstly, IPX contents are fetched
  • The Scripting language is used to generate________
    1. Country level content
    2. Empty content
    3. Dynamic content
    4. Trashed content


Topic 20:

Tools for web development:

Web development tools are divided into five categories


1. WYSIWYG editors:

WYSIWYG stands for What-You-See-Is-What-You-Get. In this category no knowledge required about HTML

Two prominent editors are

  • Adobe Dreamweaver
  • Adobe Muse


2. Code editors:

 Code editors are helpful to use a tool that “understands” HTML, CSS, and so on.

Some of the options include 

  • Atom
  • BlueFish
  • Brackets
  • Notepad++
  • Sublime Text
  • Visual Studio Code


3. Full IDEs:

IDEs stand for Integrated Development Environments. This is commonly used for dynamic content.

Some of the options in this include

  • Eclipse
  • NetBeans
  • Visual Studio


4. Cloud-based environments:

In this category, you don't have to worry about installing, supporting, and synchronizing different web development tools.

Two Popular sites are

  • CodeAnywhere
  • Cloud9


5. Code playgrounds:

Code playgrounds provide a way to experiment, demonstrate, and share smaller snippets of code

Some of the most popular include 

  • CodePen
  • JSFiddle
  • CSS Deck
Assessment:

  • HTML document comprises ___ and textual contents.
    1. HTML elements
    2. URLS
    3. Keyboard keys
    4. Web Browser
  • Which of the following is the correct "Title" tag?
    1. <Head-Title>Pakistan</Head-Title>
    2. <Ttl>Pakistan</Ttl>
    3. <Title>Pakistan</Title>
    4. <Win-Title>Pakistan</Win-Title>
  • <br>, <cite> and <code> are text elements.
    1. Windows
    2. Inline
    3. Outline
    4. Server
  • In nested elements, nested elements or inner elements must be closed first.
    1. False
    2. True
  • <a href=http://www.centralpark.com">Central Park</a> Identify the opening tag from the above HTML element code
    1. <a href=http://www.centralpark.com">
    2. <a href
    3. Central Park
  • A web developer forgot to write an ALT tag with images on the webpage. Which of the following tool can generate a warning for missing ALT tags?
    1. Calculator
    2. HTML Validator of W3C
    3. TCP/IP
    4. Browser
  • <h1>Something<strong>About You</h1></strong> This is wrong nesting. Because
    1. The inner element is closed first
    2. The outer element is closed first
    3. The inner element is not closed
    4. The outer element is not closed
  • WYSIWYG stands for
    1. What you see is why you get
    2. What you see is When you get
    3. What you see is what you get
    4. When you see is what you get
  • HTML has only a single version.
    1. True
    2. False
  • HTML stands for
    1. High-transfer markup language
    2. Hypertext manipulated language
    3. Hypertext transfer markup language
    4. Hypertext markup language
  • <!DOCTYPE> is written at the of the HTML document.
    1. Bottom
    2. Out
    3. Start
    4. Center
  • <a href="URL">link text</a> Identify the destination part from the above HTML code.
    1. link text
    2. </a>
    3. URL
    4. <a></a>
  • <ul>
<li>About US</li>
</ul>
The above code is an example of
    1. Full ordered list
    2. Unordered list
    3. Descriptive list
    4. Ordered list
  • _______are used to add meaning to specific parts of a web page.
    1. Description tags
    2. Paragraph tags
    3. List tags
    4. Semantics tags
  • Links are not an essential feature of web pages.
    1. True
    2. False

The END 😊