/HTML Showcase

Showcase of my HTML Knowledge!

Hello! I am DrChicken24! I am showcasing my knowledge!

First, there is bold, there are
page breaks, paragraphs, italics, ^{superscripts,}_subscripts,small text, big text, strong text, inserted, ~~and deleted text.~~

There are also different types of headings, which is the big text at the top of the screen. First, there is

h1,

then

h2,

then

h3,

then

h4,

then

h5,

and finally,

h6.

There is also text that can be alligned to a place on the page, like this text in the center! The line above is 50% the size of the normal line because of the width attribute.

You can also align lines, like the one above.

You can add images, like this:

This is a hyperlink which will lead you to the HTML course on this tab!

This is a hyperlink which will lead you to the HTML course in another tab!

There are also lists:

list item and numbered lists:

List Item 1
List Item 2

and then there are bullet lists:

Item 1
Item 2

And here is a table:

Spot 1

Spot 2

There are also bordered tables, which looks like this:

Spot 1

Spot 2

Now, you can change the background color of the cells:

Spot 1

Spot 2

Now, time to get colorful!

You can change the color of text, and you can also change the

background!

Now there is input, which is used for putting in usernames and passwords, among other things:

You can also add a submit button, and labels:

If you don't want to take up room with the labels, you can use placeholders:

You can also make a field required! Try pressing enter with nothing in the boxes.

Additionally, you can add a reset button:

This is kind of in this section: You can create your own buuttons:

Now, you can use option buttons:

Option 1
Option 2

You can also do checkboxes, so you can choose multiple options:

Option 1
Option2

Here are the different types of inputs:

That about sums it all up... Next will be HTML5, so thank you so much for viewing!!

HTML5:

This is the HTML5 section. Everything from above still applies here, but these are new things that HTML5 has introduced!

So, there was new page structure, headers and footers, articles, sections, and asides, which are things that don't provide anything that looks. So here is there things new that makes actual visual changes:

There is audio, which won't play currently.

There are many different things you can do with audio, like autoplay and loop.

Next is videos:

You can also use autoplay and loop. How to be cruel to your website viewers: no controls, autoplay loop. :)

Next, progress bars. You can combine them with JS to show actual real time progress with the actual progress of a task.

Status:

Now there is web storage, allowing a site to store data on the users local computer. Before you had to use JS, but now you can use HTML5! There are two types: sessionStorage() and localStorage(). Session is destroyed as soon as the user closes the browser, while local is stored with no experation. A basic JS understanding should be obtained before understanding and using API.

Then there is geolocation API, which is the location of the user. it is usually only used with the user permission, since it is very private information. And then there is a bunch JS stuff I am learning in the HTML course for some reason.

Then, more API stuff, draggable images, JS, gobblygook like that (until I learn JS, that is).

Finally, something HTML! SVG, which are Scalable Vector Graphics. You can add images with .svg. You can also make shapes:

Yeah I didn't create that... that thing up there...

There are also lines, rectangles, polygons, and ellipses. I can't think of any moment I would need to use any of this on a website, though.

Here is an animated shape you can make:

We can also do paths to draw shapes, like this one:

More JS stuff: Canvas. Pretty much just a place to keep graphics. You can increase the canvas on X and Y axis just like anything else. So yeah, JS stuff and things.

SVG and canvas are somewhat similar, and you can use both on the same page. But you can't just draw SVG on to the canvas, and vice versa. This is a list from the lesson:

Elements are drawn programmatically
Drawing is done with pixels
Animations are not built in
High performance for pixels-based drawing operations
Resolution dependent
No support for event handlers
You can save the resulting image as .png or .jpg
Well suited for graphic-intensive games

Elements are part of the page's DOM (Document object model)
Drawing is done with vectors
Effects, such as animations are built in
Based on standard XML syntax, which provides better accessibility
Resolution independent
Support for event handlers
Not suited for game applications
Best suited for applications with large rendering areas (for example, Google Maps)

More JS stuff.

For forms, you can now add autofocus, which makes the user already ready to type:

You can also change type="text" to type="email", so iOS shows the @ and .com labels on the keyboard when you click.

HTML5 added several new input types:

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

New input attributes in HTML5:

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

height and width

list

min and max

multiple

pattern (regexp)

placeholder

required

step

Here is a data list:

Here are other examples of inputs that show special on mobile devices:

And that is HTML! :D I finished the course, but I still have much to learn! CSS, JS, more HTML, etc. Thanks for viewing! And special thanks to SoloLearn for this amazing website/app! :)

HTML/HTML5 Knowledge