Documente Academic
Documente Profesional
Documente Cultură
Developed by: Ling McDermott
The Web
So here’s how it works:
Image retrieved from: http://contentdeliverance.com/cms‐school/wp‐content/uploads/2011/05/client‐server‐diagram‐
internet.png
The Client is you and all the other computers that access the web.
The Server is a computer that contains all the information that is displayed in webpages. These
computers have programs that give us the content.
The Browser is software in our computers that interpret the information from the Servers into content
that is understandable by the common person. Its output is what we know as the webpage. There are
many browsers available to us now. The more popular ones are Google Chrome, Mozilla Firefox, and
Internet Explorer. What is it that the browser interprets? It is the code we know as HTML and a
relatively brand new thing called CSS.
CompEd2 3rd Trimester AY2017‐2018
Developed by: Ling McDermott
<tagname attribute =“value”>
content
</tagname>
Each tag has a start tag and end tag. The content, which is what the client sees on the browser, goes
between the tags. The attribute on the hand is a modifier of a tag. An example of this would be
modifying the font color or font size.
Here’s a sample HTML document, color coded for easier explanation.
<!doctype HTML>
<html>
<head>
<meta charset="utf‐8">
<title>Title of your page goes here</title>
</head>
<body>
Bulk of your content here.
</body>
</html>
An HTML document always starts with this line: <!doctype HTML>. This tells the browser which
version of HTML it needs to interpret. It is HTML 5 in this case.
The <html> tag is always the first tag in the document. It tells the browser that it is an HTML document.
The <head> tag contains all head elements such as meta information, title and styles (What are meta
information?). This part will also contain the information about the CSS for the HTML document. The
line <meta charset="utf‐8"> is a new attribute for HTML 5 that makes it easier to define which character
set to use (What is Character Set?).
CompEd2 3rd Trimester AY2017‐2018
Developed by: Ling McDermott
The <body> contains the content of your web page. It may contain:
Headers:
<h1>Header 1</h1>
Paragraphs
<p> This is a paragraph</p>
Lists
<ul>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
</ul>
Images
<img src="http://www.google.com/images/logo1w.png" alt="Google">
Links
<a href="http://www.google.com">Google</a>
CompEd2 3rd Trimester AY2017‐2018
Developed by: Ling McDermott
Here’s a sample of a simple webpage shown in HTML:
<!doctype HTML>
<html>
<head>
<meta charset="utf‐8">
<title>I am a simple webpage</title>
</head>
<body>
<h1>I am a Simple Webpage</h1>
<h2> I am a header too but smaller. </h2>
<p>I am a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fringilla mauris ut
cursus pellentesque. Curabitur scelerisque nibh augue. Curabitur tristique enim id hendrerit mattis. Fusce
convallis in urna at tristique. Nam lorem lorem, pulvinar nec quam in, porttitor aliquet velit. Donec tortor
libero, porttitor ut pretium in, laoreet at tellus. Praesent dictum libero at erat porttitor accumsan.
Praesent ac dictum metus, eget commodo diam. Nunc aliquam urna non nisl pellentesque, non lobortis
augue molestie. Vestibulum finibus velit non ligula elementum euismod.
</p>
<a href=http://www.google.com> Click here to go to Google main page</a>
<p>Below is a picture of a cute puppy</p>
<img src=http://sunnylol.com/images/2012/August/15/502ba65e50429.jpg>
<p>Picture retrieved from http://sunnylol.com/images/2012/August/15/502ba65e50429.jpg</p>
</body>
</html>
CompEd2 3rd Trimester AY2017‐2018
Developed by: Ling McDermott
Here’s what it would look like on a Browser:
As you have learned, HTML provides the structure for your content. CSS, on the other hand, provides
the style and presentation of your content. CSS stands for Cascading Style Sheets. The CSS code is
embedded inside or linked to the HTML document. Here’s a generic CSS code:
selector {
property: value;
property: value;
}
The selector pertains to the html element to which the style will be assigned to. The property is the
asset that will be styled according to the value indicated. The CSS document can style the text, color,
size and position of the various elements in the HTML document. Now, here’s a more specific CSS code:
CompEd2 3rd Trimester AY2017‐2018
Developed by: Ling McDermott
body {
font‐size: 12px;
color: black;
background‐color: grey;
}
The code above states that everything inside the body of the html document should have a font size of
12px, font color of black and a background of grey.
I will not delve too deep into CSS coding here, during our first week. You will learn about CSS as we go
along.
We are done with HTML and CSS basics. Let’s get started with the exercises.
References:
Cool, H. (2006, January 6). Web File Organization and Naming Conventions. Retrieved from
http://blog.case.edu/webdev/2006/06/20/web_file_organization_and_naming_conventions.html.
Molina, T.R. (n.d.). File Management: An Easy Guide to Organizing. Retrieved from
http://mediamilitia.com/file‐management‐an‐easy‐guide‐to‐organizing/
Teaching Materials: HTML & CSS. (n.d.). Retrieved from http://www.teaching‐materials.org/htmlcss/