Discover Top Posts Tagged with #imm715

Introduction to HTML - Building Your First Webpage

If you told me year ago that I would be able to make web-pages using “Hyper Text Markup Language” I wouldn’t believe you. This fall was very exciting, just a couple of month ago I learned how to create my first webpage! And then I learned something even more exciting - how to link it to another page…And then how to create a list as menu and a responsive page….and php…and then how to make php responsive! And now I’m working on creating my first website!

Web pages are written in HTML, the web programming language that tells web browsers how to structure and present content. HTML is as the skeleton that gives every webpage structure. Webpages become expressive with the introduction of CSS (Cascading Style Sheets). CSS gives an easy, efficient way to define a web page’s layout and beautify the page with design elements like colours, rounded corners, gradients, and animation.

How to create your first page? It's not hard!

To begin writing HTML, you first need a plain text editor that you are comfortable using (for example Brackets). To create your first webpage first you should set up the skeleton of the page. All HTML documents have a required structure that includes the following declaration and elements: <!DOCTYPE html> <html> <head> and <body>

Here is an example:

<!DOCTYPE html>

<html>

<head>

<title>This is my title </title>

</head>

<body>

<h1> This is the Header </h1> <p>This is your first web page! </p>

</body>

</html>

<!DOCTYPE html> tells the browser what language it's reading (in this case, HTML); <html> starts the HTML document; </html> on the last line ends the HTML document. Within the <head> is where you place the <title> of your page. The <title> of your page appears in the name of the window. Also within the <head> tag is where you will place the link to your styles (CSS). Within the <body> is where you'll do the majority of your coding. This is where you place your content, including text, links to images and whatever you like.

The first thing you probably have noticed are the tags. An HTML tag defines what you want to accomplish: whether that's to create a link, insert an image, or simply place some text on the page. Each tag has an opening tag and a closing tag; the keywords within each tag are enclosed by angle brackets (<h1>).If your tag is missing an angled bracket, then the whole tag is rendered ineffective. Such a little tag, but incredibly powerful!

Now create a name for your first webpage between <title> and </title>, a header between <h1> and </h1> and input some text between <p> and </p>. Congratulations you just have created your first webpage!

#imm715 #html #firstwebpage #webpage #interactivemedia

Display, Box Model, and Float: The Backbone of the Layout

Development Tools I has moved through an impressive amount of material in just six short weeks. Before beginning the class, my coding experience was limited to changing hex color codes in order to “personalize” blogs. At this point in the semester, I have already learned how to build a simple website from the ground up using different layout options, which provide a basis for solid visual design.

Before getting started with the details of layout declarations, I’ll go over the very basics of HTML and CSS. HTML stands for Hyper Text Markup Language and forms the skeleton of a website or, at its most basic, something that looks like this:

This kind of appearance is usually only something you see if there is a problem with your Internet connection. Technically, all of the visual design (layout, colors, font sizes etc) can be added into the HTML page and end up displaying an up-to-date looking site. But what happens if I want the link at the bottom of the page to have the same exact style? I would have to manually put all of the same styles into that page of HTML, leading to potential errors, discrepancies and an overall tedious process.

This is where CSS comes in handy. From a development standpoint, CSS makes things much more efficient because it uses one page to control the styles of many pages of HTML. For example, instead of writing in the styles in every HTML page individually, I can simply attach each HTML page to the CSS and it will control the styles of each one. Understanding these fundamentals is key to a successful use of three different layout options- Display, the Box Model, and Float.

Display: As explained in learnlayout.com, the “display” attribute in CSS is very important for managing the design and organization of a site’s content. Without specifying the display, text would simply stretch from the far left corner to the far right, with no columns or sections. Usually this type of design is not ideal, seeing as it is more of an absence of design. This is corrected by using the display declaration.

The image below shows an example of CSS and how the display: block attribute is incorporated:

An important thing to note is the difference between “block” and “inline” elements. Block elements force a line return, whereas inline elements do not alter the paragraph. An example of an inline element would be a link or a “bold” setting for a certain word or phrase. Block level elements stretch all the way across the page unless the width is specified otherwise. In the example above, the container, column and navigation tab are all block level. Other types of display options include tables and lists.

Box Model: The “Box Model” gets in name from functioning like boxes within boxes within yet more boxes, only on a website. Box shape aside, they work like Russian nesting dolls. In web design, it refers specifically to the main content and everything else surrounding it: borders, margins, and padding.

In the example above, the first box is H1, or Header 1. The words “This is a box” is the content and the beginning part of the box. The content is separated from the border by what is referred to as the padding. Without the padding, the words would begin at the upper left-hand corner of the pale green area. The darker green area is the border, which acts as the third layer of the box. The fourth and final layer is the margin, which is white and blends in with the background. Like the other box model elements, without the margin, the colorful area would start in the upper left-hand corner, with no separation from the edge of the screen. Below is the HTML for the Box Model example:

As you can see, the HTML is very simple and implies that the Box Model is executed in the CSS (shown in the next image.) Note that Header 1 and Header 2 both have specified pixels for the padding, border, and margins. Header 2 also has a fixed width, which is why it turns out to be shorter than Header 1. Since H1 has no fixed width, it stretches all the way to the right.

Float: The “float” option in CSS allows the intended block element to appear next to another block element, as opposed to forcing it to the next line. For example, using the syntax float: right under the “nav” section of the CSS (the parent element) will cause the navigation menu to appear alongside the main column, on the right-hand side. In Microsoft Word, it functions just like the “Text Wrap” option, where an image and text are allowed to appear side by side. Superman's page demonstrates the use of float, as the column (containing the image and text) and the navigation tab on the right are next to each other.

The CSS would look something like this:

Overall, these three attributes demonstrate how HTML and CSS syntax correlate with print design and layouts we are used to seeing outside of digital media. Without the display and float properties and the Box Model concept, a webpage would have no logical structure. With proper use, they help execute professional, clean design.

#IMM715 #IMMT715 #html #css #webdesign #layout

Building your first web-page. Floating elements.

The CSS float property is a very important property for layout. It allows positioning web page designs exactly as you want them to display, but in order to use it is important to understand how it works.

The float property was originally designed to allow content to wrap around images. Here is a simple example from the car rental section of the Porter website. An element <img> (Hertz) with a width of 150px is floated to the left side of a few paragraphs of text, with paragraphs wrapped around the image.

An element can be floated to the right or to left. Furthermore, the box with its contents could either float to the right or to the left in a document (or the containing box).

The principle of how floats work is illustrated on the image below:

Here is a vivid example of the illustration above:

How is it done?

HTML for the example above would look as follows:

</div>

To make the picture float to the left and the text wrapped around it, we would need to define the width of the box, which surrounds the picture and then set the float in CSS:

#picture {

float: left;

width: 100px;

}

Floats are also used for columns in a document:

To create the columns, you simply have to structure the desired columns in the HTML-code with <div> as follows:

<p>your text for column1 is here.</p>

</div>

<p>your text for column2 is here.</p>

</div>

<p>your text for column3 is here.</p>

</div>

In CSS: the desired width of the columns is set to 33% with float each column to the left:

#column1 {

float:left;

width: 33%;

}

#column2 {

float:left;

width: 33%;

}

#column3 {

float:left;

width: 33%;

}

What can you float?

You can only float block-level elements (and can’t float inline-level elements).

What’s the difference?

Block-level elements occupy any available width, regardless of their content, and begin on a new line.

Inline-level elements occupy only the width their content requires and line up on the same line, one after the other.

Inline-level elements are generally used for smaller pieces of content, such as a few words selected to be bolded. Block-level elements are used for larger pieces of content, such as headings and structural elements (images (img), paragraphs (p), divisions (div), lists (ul).

How far will it float?

When an element is floated, it will float all the way to the edge of its parent element. If there isn’t a parent element, the floated element will then float all the way to the edge of the page.

To prevent floated elements from touching one another, causing the content of one to sit directly next to the content of the other, we can use the margin property to create space between elements.

The property clear.

Elements following a floated element will wrap around the floated element. If you do not want this to occur, you can apply the clear property. Clear property accepts a few different values, the most commonly used are: left, right, and both.

Let’s come back to the example with Bill Gates, where the text is automatically moved up beside the picture of Bill Gates.

To avoid the text from floating up next to the picture, we can add clear property to our HTML and CSS:

HTML:

</div>

<h1>Bill Gates</h1>

<p class="floatstop">causas naturales...</p>

CSS:

#picture {

float:left;

width: 100px;

}

.floatstop {

clear:both;

}

Conclusions:

You should always define a width on floated elements. If the floated element does not have a pre-defined width, it will take up as much horizontal space as required and available, regardless of the float.

Be aware that the float property relies on an element having a display value of block, and may alter an element with a display value of inline. For example, <span> inline-level element would ignore any height or width property values.

Float property comes with a few pitfalls. The styles of elements around the floated element can be negatively impacted. Often margin and padding property values aren’t interpreted correctly. Another downside is that sometimes unwanted content begins to wrap around a floated element.

To prevent content from wrapping around floated elements it is important to understand how clear floats (using the clear property).

Appropriate links:

https://developer.mozilla.org/ru/docs/Web/CSS/float

http://webdesign.about.com/od/advancedcss/a/aa010107.htm

http://html.net/tutorials/css/lesson13.php

http://learn.shayhowe.com/html-css/positioning-content/

#imm715 #html #float #css #clearproperty layout

Building your first web-page. Floating elements.

An element can be floated to the right or to left. Furthermore, the box with its contents could either float to the right or to the left in a document (or the containing box).

The principle of how floats work is illustrated on the image below:

Here is a vivid example of the illustration above:

How is it done?

HTML for the example above would look as follows:

</div>

To make the picture float to the left and the text wrapped around it, we would need to define the width of the box, which surrounds the picture and then set the float in CSS:

#picture {

float: left;

width: 100px;

}

Floats are also used for columns in a document:

To create the columns, you simply have to structure the desired columns in the HTML-code with <div> as follows:

<p>your text for column1 is here.</p>

</div>

<p>your text for column2 is here.</p>

</div>

<p>your text for column3 is here.</p>

</div>

In CSS: the desired width of the columns is set to 33% with float each column to the left:

#column1 {

float:left;

width: 33%;

}

#column2 {

float:left;

width: 33%;

}

#column3 {

float:left;

width: 33%;

}

What can you float?

You can only float block-level elements (and can’t float inline-level elements).

What’s the difference?

Block-level elements occupy any available width, regardless of their content, and begin on a new line.

Inline-level elements occupy only the width their content requires and line up on the same line, one after the other.

How far will it float?

When an element is floated, it will float all the way to the edge of its parent element. If there isn’t a parent element, the floated element will then float all the way to the edge of the page.

To prevent floated elements from touching one another, causing the content of one to sit directly next to the content of the other, we can use the margin property to create space between elements.

The property clear.

Let’s come back to the example with Bill Gates, where the text is automatically moved up beside the picture of Bill Gates.

To avoid the text from floating up next to the picture, we can add clear property to our HTML and CSS:

HTML:

</div>

<h1>Bill Gates</h1>

<p class="floatstop">causas naturales...</p>

CSS:

#picture {

float:left;

width: 100px;

}

.floatstop {

clear:both;

}

Conclusions:

To prevent content from wrapping around floated elements it is important to understand how clear floats (using the clear property).

Appropriate links:

https://developer.mozilla.org/ru/docs/Web/CSS/float

http://webdesign.about.com/od/advancedcss/a/aa010107.htm

http://html.net/tutorials/css/lesson13.php

http://learn.shayhowe.com/html-css/positioning-content/

#imm715 #html #float #css #clearproperty layout

#imm715

Trending Tags

Recently Viewed Tags

#imm715