Programming Blog


Article - 01
"Create webpage"

(23.04.2019)

Hi guys!

As a first article, I want to write about, how I have made this blog.
Here we should use just HTML and CSS.

HTML (Hyper Text Markup Language) is the standard markup language
for with whitch can create web pages and web applications.
But for something bigger like web browser game you need to use other languages like JavaScript or PHP.
And the whole design on html-sites is of course CSS (Cascading Style Sheets),
less with JS-animation.

The idea to make my programming progress blog was coming from my father who is a programmer too.
For better programming understanding.
And at the same time, I got an invitation from my company to an HTML course.
On the course, we have learned about making websites with HTML and CSS.

Before this course, I have already used HTML and CSS a little bit.
Probably it was first what I have practice learned.

But I have written CSS code with HTML in the same document with a tag <style>.
Like this: 

  <style type="text/css">
    .websiteprogression{
        background-color: grey;
      }
    p{
        text-align: left;
        margin: 0px 80px 10px;
      }
  </style>

Later,
I learned that new W3 validations criterions mean that it would be better write CSS-styles separately.
But sometimes if your code doesn't really big you can write your style code in HTML file.

I can and I like to draw,
but whatever you can see that the first time wasn’t that good.
Here you can see blog appearance progression.
First versions were so monotonous and flatly.
( And as a painter I don’t like too much white color on the screen, you can see that on the example of this page.
  But sure sometimes minimalistic design awesome, as an example Google Browser.)


Now about programming.
Probably this blog page doesn't complex:

index.html is default main page of site on hosting must be named 'index' with expansion .html.

main page code:

<!DOCTYPE html>
    <html type="en">
      <head>
        <title>Programming Blog - Main</title>
        <link rel="stylesheet" href="list.css" />
        <link rel="shortcut icon" href="logo16x16e.png" type="image/x-icon">    <!-- Browser window icon -->
        <h1>Programming Blog</h1>
        <img src="logo.png" alt="Logo">
      </head>
      <body>
          <header>
             <div id="list">
               <nav>
                  <ul>
                      <li><a href="index.html">Main</a></li>             <!-- Menu -->
                      <li><a href="blog.html">Blog</a></li>
                      <li><a href="aboutme.html">About Me</a></li>
                  </ul>
                </nav>
      	    </div>
          </header>
      <main>
      <p>Welcome Internet Argonauts<br>
      to my Programming Blog<br>
      hier im writing what i have learned in Programming<br>
    	</p>
    	<p>Good time of day!</p>

        <h2>My Contact Information:</h2>
        <p class="phone">Tel. <br></p>
    	<img src ="mail_1.png" alt="mail">
            </main>

        </body>

        <footer>

          <script>
          window.onload = function() {
          startTime();
          };
          </script>

          <div class="nixcont">

              <div class="nixpair">
              <script src="index.js"></script>

        </footer>
    </html>

Html webpage usually parted on 2 or 3 parts: head body and footer.

In head how i have already said we writing webpage information like
site scc styles: 

<link rel="stylesheet" href="list.css" />

--------------------------------------------------------------------------------------
title:

<title>Programming Blog - Blog</title>


--------------------------------------------------------------------------------------
and website icon: 

<link rel="shortcut icon" href="logo16x16e.png" type="image/x-icon">


--------------------------------------------------------------------------------------

In body, we have all after browser tabs.
Probably here you work with your website.
It's too much to write about all function of html
so I wrote just about the menu which you can on the top.
My menu is simply a list:

<header>
    <div id="list">
        <nav>
          <ul>
              <li><a href="index.html">Main</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="aboutme.html">About Me</a></li>
          </ul>
        </nav>
    </div>
  </header>

<ul> is defines an unordered (bulleted) list. With child <li> as one list string.
And tag <a> mean a link with attribute href="adress".
So looks like <ul> list without scc:

<ul>
      <li>cake</li>
      <li>muffin</li>
      <li>tee</li>
  </ul>

Browser:

----------------------------------------------------------------------------------------------
Numbered list wit <ol>:

<ol>
      <li>cake</li>
      <li>muffin</li>
      <li>tee</li>
  </ol>

  <ol start = "100">
      <li>cake</li>
      <li>muffin</li>
      <li>tee</li>
  </ol>

Browser:

  1. cake
  2. muffin
  3. tee
  1. cake
  2. muffin
  3. tee
But with css it looks completely different(see website menu):

nav ul { /*Where should be this container (<div>) nav <ul>*/
      margin: 0; /*Sets the value of the fields around the contents of the element. Here without.*/
      padding: 0; /*Sets the amount of padding from each edge of an element. Here without too.*/
      text-align: center; /*Text in div should be on the middle.*/
  }

  nav li {  /*How would be <li> displayed*/
      display: inline;
  }

  nav li a {  /*How will look element <a>*/
      display: inline-block;
      text-decoration: none;
      color: #FFFFE0;
      padding: 1rem 1rem;
  }


And special,
You can see that if you hover by menu over an element with the cursor (mouse pointer)
this sector will change color to red.
For this effect you need to use pseudo-class :hover:

nav li a:hover {
      background-color: #c21525;  /*Change background-color to red.*/
      border: 2px double black;  /*Change border design.*/
    }


Congratulation you have created the first website!
Of course, it's simple but you can do much more with it,
use JavaScript or CSS-animation and even more.

Do your own experiments!
Luck!
See you!

Back

Back to start