HTML 201

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

General HTML Back to tutorials
                                                      Work in progress                    

Visitors
html 201 and a small bit of CCS ( Hypertext Markup Language) and (Cascading Style sheets)

Prepared by George Owings      
Introduction:
HTML is a very syntax specific language and all spacing, quotes and bracketss have to be exact or the browser you are using won’t recognize the code.

I have a lot of html code I will present to you to examine, study and rearrange in different ways.  Consider all green text to be an assignment.  All codes will be purple.   I want you copy-paste the examples into an editor at the website;
Code editor:Code Editor   takes you to https://jsfiddle.net/

Another Code Editor     You can also use the editor at this website to test your code.     takes you to https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_document 

Run the program. examine the code and see what it does. Blinking Text Blinking Text is another tool to use in making interesting web pages. !!!

The following code allows the coder to blink tagged text.
<head>
<style>
blink {
color:red;
-webkit-animation: blink 1s step-end infinite;
animation: blink 1s step-end infinite
}

@-webkit-keyframes blink {
67% { opacity: 0 }
}
@keyframes blink {
67% { opacity: 0 }
}
</style>
</head>

<body>
<blink>Blinking Text is another tool to use in making interesting web pages.!!!</blink>
<blink>Blinking Text!!!</blink>


Multiple columns:

It is possible to present extended text in multible columns using the below format.

Note: Internet Explorer 9, and earlier versions, does not support the column-count property, but Chrome, Sarari, Opera and Firefox do. The elements column-count specifies the number of columns and column-gap determine the space between columns (I used 40px).
The following example will divide the text in the <div> element into 3 columns

There are times when you will want to present your text in columns for better composition and easier reading.

So from what I can see… WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome. Are there such engines for IE/Opera/Firefox and what are the differences, pros and cons of using one over the other?It is a shorthand property that sets both the column-width and column-count properties in a single, convenient declaration.

<'column-width'> Is a value or the keyword auto giving a hint of the optimal width of the column. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). The length must be strictly positive or the declaration is invalid.

<'column-count'> Is a strictly positive describing the ideal number of columns into which the content of the element will be flowed. If the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns.

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property, but Chrome, Sarari, Opera and Firefox do.</p>

<div class="newspaper">
There are times when you will want to present your text in columns for better composition and easier reading.
<br><br>
So from what I can see… WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome. Are there such engines for IE/Opera/Firefox and what are the differences, pros and cons of using one over the other?It is a shorthand property that sets both the column-width and column-count properties in a single, convenient declaration.<br><br>
<‘column-width’>
Is a <length> value or the keyword auto giving a hint of the optimal width of the column. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). The length must be strictly positive or the declaration is invalid.
<br> <br><‘column-count’>
Is a strictly positive <integer> describing the ideal number of columns into which the content of the element will be flowed. If the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns.

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

You can code individual attributes of portions of the text inside the columns using subscripts, superscript, etc. You can also code lists inside the columns if you wish.  If you style colors inside the columns you must use <p style ="color:red"> Text </p> but remember this will cause a line break. If you wish, experiment with placing images inside the columns.

Exercise 1:  Copy paste the columns code into your editor and make a short 2-column presentation with a 80px gap. Use different attributes and color styling inside the columns.


To justify any designated text in columns or elsewhere, use the following CSS code inside the header;
<style>
p {
text-align: justify;
}
</style>

You can use text-align: justify,right or center to control the text in tables, lists, columns or just plain text entries.