Review And Paraphrase- Web Design|Computer Science
Explain Image replacement Kellum and Phark Technique.
Answer:
The Kellum image replacement technique hides the HTML text by pushing it out of the visible element box with the text-indent property. We set white-space property to no-wrap, to make sure that long strings of text will not wrap around and show up again in the
element box. We set overflow: hidden to ensure not displaying anything that falls outside of the element box.
<style>
p {
text-indent: 100%;
overflow: hidden;
white-space: no wrap;
}
</style>
The Phark technique uses an extremely large negative text-indent value (typically we set text-indent to -9999px) to pull the HTML text all way out to the left of the viewport area.
<style>
p {
width: 350px;
height: 150px;
text-indent: -9999px;
}
</style>
Learning Outcome(s):
Fundamentals of Image replacement techniques.
1.5 Mark
Pg. ! Question One 2
Question Two What are the three core components of a Responsive webpage?
Answer:
they are : 1- Fluid layout: Fluid (or liquid) layouts resize proportionally when the browser window resizes. the page area and columns within the page get wider or narrower to fill the available space in the browser window. In other words, they follow the default behavior of the normal flow. There is no attempt to control the width of the content or line breaks;
the text is permitted to reflow as required and as is natural to the medium. Advantages: Fluid layouts keep with the spirit and nature of the medium. They avoid potentially awkward empty space because the text fills the window. On desktop browsers, users can control the width of the window and content. No horizontal scrollbars Disadvantages: On large monitors, line lengths can get very long and uncomfortable to read. They are less predictable. Elements may be too spread out or too cramped at extreme browser dimensions. It may be more difficult to achieve whitespace. There is more math involved in calculating measurements. 2- Flexible images: When the layout scales down, the images and other embedded media need to scale with it; otherwise, they would hang out of view.
3- CSS media queries: Media queries are a method for applying styles based on the medium via which the document is displayed. Queries start with questions, such as, “Is the document being printed? Then use these print-appropriate styles.” Or, “Is the document on a screen, and is that screen at least 1,024 pixels wide and in landscape mode? Then use these styles.”
Learning Outcome(s):
Describe
fundamental of Responsive Web
design
1 Mark
Pg. ! Question One 3
Question Three
Using JavaScript differentiate embedded and external scripts.
Embedded script: to embed a script on a page, just add the code as the content of a script element:
<script>
document.getElementById(“demo”).innerHTML = “Hello”;
</script>
External scripts point to an external JavaScript file (ends with a .js suffix) by using the src attribute; then the script element has no content. The benefit is that we can apply the same script to multiple pages.
<script src=”my_script.js”></script>
Learning Outcome(s):
The student will be able to apply different <script> Element in embedded and external use of JavaScript
1 Mark
Pg. ! Question One 4
Question Four
Use Function in JavaScript and take example of onLoad() and onUnload ()
intrinsic event attributes in your program to display message WELCOME
when page upload and THANKS FOR VISIT when page is unload in a alert
window.
To display message WELCOME when page is upload:
<!DOCTYPE html>
<html>
<body onload=”myFunction()”>
<script>
function myFunction() {
alert(“WELCOME”);
}
</script>
</body>
</html>
To display THANKS FOR VISIT when page is unload:
<!DOCTYPE html>
<html>
<body onunload=”myFunction()”>
<script>
function myFunction() {
alert(“THANKS FOR VISIT”);
Learning Outcome(s):
Able to write codes in JavaScript with different event attributes, also use of alert window
1.5 Mark
Pg. ! Question One 5
}
</script>
</body>
</html>
