Intro to Multimedia. MAT 103

Alejandra Jarabo
HTML CODE. Web standard language
TO NEXT PAGE

 

Hyper Text Markup Language: html

Current standard: XHTML (eXtensible)

Based on XML--> Set of guidelines for delimiting a text through System tags, used across computers, digital devices and operative systems (so everybody can see the "same" page)

Tags wrap around the content like the head and tail of a train around the wagons. They help structure and organize the content of the page.


Ex: tag for paragraph

Opening tag <p>

Closing tag </p>

<p> This is how you structure a paragraph in html. You can add several phrases, even breaks in the line <br>This is the second line of the paragraph.
</p>


The minimum structure of an html page looks like this:

<html>

<head>
<title>my name is Finding Nemo</title>
</head>

<body>
<h1>This is the main heading of this page<h1>
<p>This is a paragraph about the Disney movie with the same name. <strong>Nemo</strong> is a clown fish that lives with his father in the coral reef.
</p>
</body>


</html>

The "head" part of the page (defined inside the <head> tag) contains important information about the content, structure and organization of the page but its content is not directly visible (think of it as the brain of the page).

Some of the content of the head that you don't see in this basic example are the <meta>, <style>, <script>, <base> and <link> tags that we will see down the page.


The "body" part of the page (defined inside the <body> tag of the page) defines the literal content of the page: the text, organized in paragraphs, also the images and links, that i did not add to this basic example.
All the content of the body tag, wrapped in structural tags, will be visible on the page.

Before html 4, we used to also use information about how the content of the page would be displayed (font, font size, justification, background color...).
All the display information about the page is contained now in the CSS structure, that is usually placed in a separate style sheet file, linked to the html file.

<Tags> can have attributes, that let you provide extra information about the element. That information is specified in the value of that attribute. The attribute (think of it as a property) and value of a tag are placed within the opening tag structure.
The value is always written within quotes and separated from the attribute by an equal sign.

<p bgcolor="#CC6666">

HOW TO ATTACH AN IMAGE TO AN HTML PAGE

The image tag <img> uses 4 attributes to provide information about the image.
The first attribute src locates the source file or the image that is linked to the page. In this case the image called "reef.jpeg" is located inside a folder called "images", and that folder is placed at the same level than the html file.

The location of the image is based in the RELATIVE POSITION of the file with respect to the html.
We could also describe the location of the image as an ABSOLUTE LINK, beginning with "http:// "
("http://soma.sbcc.edu/users/ajarabo/Intro_Multimedia/images/reef.jpeg")

The RELATIVE LINK is simpler and easier to write, as you see.("images/reef.jpeg").
Remember that the value of an attribute is always written inside quotation marks.

<html>
<head>
<title>my name is Finding Nemo</title>
</head>

<body>
<p>This is a paragraph about the Disney movie. Nemo is a clown fish that lives with his father in the coral reef.</p>
<img src="images/reef.jpeg" alt="coral reef at sunset" width="240" height="180">

</body>
</html>

 

Underneath the paragraph you can see the <img> tag that allows you to insert an image.

Images in html are not embedded in the page, but only attached. That means the image file is placed independently within the Root folder (the folder that contains all the information for the site), and it is "called" to appear on the page through this tag.
This is the reason why you need to add an attribute defining where is the file: the "src" attribute, and then an the "width" and "height" attributes with the information that will allow the page to reserve the right space for the image.

The file "reef.jpeg" is located inside a folder called images, with is standard practice. We do this so html and image files are not all mingled inside the root folder. the slash sign / that you see in the source name indicates that the file is within a folder, placed at the same level than this html file. More about the root folder, HERE

 

CURRENT WEB STRUCTURE

The DIV tag is a very important tool to align and structure the elements in an html page.

A div tag defines logical divisions within the content of a web page: You can use div tags to center blocks of content, create column effects, create different areas of color, and much more.

You can define how a div tag looks and works exhaustively by creating a class in CSS and applying it to the div in the html.
Besides width, height and background color, you can define, border, margin, padding, relative or absolute positioning on the page. You can also defined with detail the look of the text that will be used within a Div.

The current model of web design is based on Boxes within the page and div tags create containers that work as Layout blocks. When a div tag has absolute positioning is called an AP element.

CSS (Cascade Style Sheets), defines how to display html. Technically it is a method of storing "styles" such as specific fonts, colors, and spacing that will be applied to the HTML document (a style sheet language).
It has become the standard way of creating the formatting and visual organization to html documents on the web (the last one hosting the structure and strict content),and it defines an era where the content and visual information of one page is separated into different structures.
More on CSS

Structure of a website (Lynda.com video. needs membership) HERE


<div align="left">2</div>

opening tag
   closing tag

tag
element		 attribute attribute's value   text on html tag
<div align ="left" > 2 </div>

In our case above, the <div> tag lets you center the content of the cell with the attribute align.
<div align="center">your text here</div>

Sample html code for an AP div:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> >
<title>Sample AP Div Page</title>

<style type="text/css">

#apDiv1 {
        position:absolute;
        left:62px;
        top:67px;
        width:421px;
        height:188px;
        z-index:1;
    }

.style7 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: x-small;
 }

</style>
</head>

<body>
<div id="apDiv1">
<p class="style7">this is a nice paragraph</p>

</div>
</body>
</html>

 

d

 

 

 

 

 

 

 

 

 

 

 

 

You can change properties for AP Divs (or any AP element) on your page, including x and y coordinates, z-index (also called the stacking order), and visibility.