HTML Flashcards
What are the key components of Web Application Architecture as outlined in the CS142 lecture notes?
The key components include web browsers, web servers/application servers, HTTP, storage systems, the Internet, and Local Area Networks (LANs).
Compare the GUI rendering in traditional applications and web applications as described in the CS142 lecture notes.
In traditional applications, GUIs are based on pixels with access to mapped framebuffers for displaying RGB colors, and toolkits are used to create GUI widgets like buttons and tables. In contrast, web browsers display documents written in HTML, and before HTML5’s canvas element, it wasn’t possible to directly write to pixels. Early web applications used multiple documents for different pages, while modern ones use JavaScript to dynamically update the documents.
Given a raw content text ‘Introduction: There are several good reasons for taking CS142: Web Applications’, how would you structure it using HTML tags to denote a subheading, emphasize the course name, and list the reasons?
The structured HTML would look like this:
~~~
<h2>Introduction</h2>
<p>
There are several good reasons for taking
<i>CS142: Web Applications</i>:
</p>
<ul>
<li>You will learn a variety of interesting concepts.</li>
<li>It may inspire you to change the way software is developed.</li>
<li>It will give you the tools to become fabulously wealthy.</li>
</ul>
~~~
What are the advantages and disadvantages of using XHTML over traditional HTML, as suggested by the evolution of HTML?
Advantages of XHTML include its strict adherence to proper syntax, which promotes cleaner and more well-formed code, leading to more consistent behavior across different browsers. The disadvantages include the requirement for more precise coding, which can be less forgiving of mistakes and may not be compatible with older web content that relies on browser-specific HTML quirks.
Define the basic structure of an XHTML element and give an example.
An XHTML element consists of a start tag, its contents, and an explicit end tag. Elements can be nested within each other, and each element must be properly closed. A shorthand notation <foo></foo> can be used for elements without content. For example, an XHTML paragraph element is structured as <p>Hello world!</p>.
What XHTML entities are used to display the characters ‘<’, ‘>’, ‘&’, ‘”’, and a non-breaking space, and where is whitespace significant in XHTML?
In XHTML, the entities < are used for ‘<’, > for ‘>’, & for ‘&’, " for ‘”’, and for a non-breaking space. Whitespace is significant in XHTML only in specific tags like <textarea> and <pre>, where it is preserved as written.</textarea>
Fix this card
Identify and describe the main components of an XHTML document structure.
An XHTML document structure includes the following main components: XML Declaration, DOCTYPE Declaration, <html> Element, <head> Section, and <body> Section.
Identify the XHTML tags used for the following purposes: creating a new paragraph, adding a line break, creating an unordered list, and specifying the title of a page.
The XHTML tags used for these purposes are: <p> for creating a new paragraph, <br></br> for adding a line break within the same paragraph, <ul> and <li> for creating an unordered list, and <title> for specifying the title of a page.</title>
Compare the syntax flexibility in HTML with the stricter syntax requirements of XHTML.
HTML is more flexible in its syntax compared to XHTML. It allows skipping some end tags, not requiring values for some attributes, and overlapping elements. XHTML, on the other hand, requires a more strict and well-formed syntax, with explicit start and end tags for all elements and no overlapping of elements. This difference leads to HTML being more forgiving of errors, while XHTML demands more precise coding practices.
Describe the purposes of the following HTML5 tags: <article>, <canvas>, <video>.
The <article> tag in HTML5 is used to define independent, self-contained content. The <canvas> tag is used for drawing graphics via scripting, including 3D graphics with WebGL. The <video> tag enables embedding of video content directly into a web page, allowing for native video playback without external plugins.
How do you create a main heading, an italic text, and a bullet list in Markdown?
In Markdown, create a main heading with one ‘#’ symbol (e.g., # Main Heading), italic text with one asterisk or underscore (e.g., *italic*), and a bullet list by starting each item with an asterisk and a space (e.g., * Item 1).
