Intro To The Web PDF

CompEd2 3rd Trimester AY2017‐2018
Developed by: Ling McDermott
Intro to the Web

The internet has been around for a long time. Many of us do not even remember a time when there was
no Internet. And I’m pretty sure we spend a majority of our time on the internet accessing webpages.
Do you ever think how these webpages work? Where does the information come from? Who designs
these pretty webpages?
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.
HTML & CSS

HTML stands for Hyper Text Markup Language. It is a programming language that tells the Browser what
to do. Some people prefer to write their own HTML code. Most people, though, prefer to use web
authoring software to create webpages. These web‐authoring software use a WYSIWYG editor that
allows the user to see the end result while creating the webpage. The user would not need to know the
code to be able to create. Since this is a web design course, you will need to know how to code. Here’s
how an HTML tag looks like.
<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?).

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>

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>

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:
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/

Intro To The Web PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Intro To The Web PDF

Uploaded by

Copyright:

Available Formats

CompEd2 3rd Trimester AY2017‐2018

Intro to the Web

HTML & CSS

You might also like