Learning HTML

79wjd · June 1, 2016

I need to learn HTML 5 to build a website. I've already learned the basics of HTML 5 (I can make a few simple pages with a navigation menu to navigate between them all). I also know C++, C, and Java, so the Javascript aspect of HTML shouldn't be much of an issue. But I don't really know where to look for a good tutorial since I'm not really sure where to go from here.

Note: I looked up some guides for how to make the navigation bar horizontal.

p.ex1 {
   padding: 2cm 0cm 0cm 20cm;
   font-size: 130%;
   font-weight: 640;
   //font-family: Titillium Web, sans-serif;
}

p.ex4 {
   padding: 0cm 0cm 0cm 20cm;
   font-size: 80%;
   font-style: italic;
}

p.ex2 {
   padding: 0cm 0cm 0cm 20cm;
   font-size: 90%;
   font-weight: bold;
}

p.ex3 {
   padding: 5cm 5cm 0cm 30cm;
   font-family: verdana;
   font-size: 70%;
}

body {
   margin: 0;
   padding: 0;
   font-size: 21px;
   background-color: #aaa;
}

nav {
   background-color: white;
   margin: 0;
   overflow: hidden;
   //position: fixed;
}

nav ul {
margin: 0;
padding: 0;
}

nav ul li {
display: inline-block;
list-stle-type: none;
}

nav > ul > li > a {
   color: black;
   backround-color: white;
   display: block;
   line-height: 3em;
   padding: 0.5em 2em;
   text-decoration: none;
   font-size: 150%;
}


<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <!meta name="keywords" content="stuff, things, etc...">
    <!meta name="description" content="management of things">
    <title>My First Web Page</title>

    <link rel="stylesheet" type="text/CSS" href="style.css">
    <script src="jquery-2.2.4.js"></script>
</head>

<body>    
    <header>
        <a href="Home.htm">
        <img src="Pictures/Logo.jpg" 
        alt="myfirstwebpage.com"
        style="float:left; width:125px;height:125px;"/> </a>
    </header>

    <nav>
            <ul>
            <li><a href="Home.htm">Home</a></li>
            <li><a href="about.htm">About</a></li>
            <li><a href="test.htm">Test</a></li>
            <li><a href="Contact.htm">Contact</a></li>
            <li><a href="Demo.htm">Demo</a></li>
        </ul>
    </nav>


    <section>
        <p class = "ex1">Request Help</p>
        <p class = "ex4">*indicates required field</p>

    
        <form action = "submitSuccess.htm" method="get" target="_blank">
            <p class = "ex2">First Name:*<br/><input type ="name" name="name" required></p>
            <p class = "ex2">Last Name:*<br/><input type ="name" name="name" required></p>
            <p class = "ex2">Email:*<br/><input type ="email" name="email" required></p>
            <p class = "ex2">Company Name:*<br/><input type ="name" name="name" required></p>
            <p class = "ex2">Job Title:*<br/><input type ="name" name="name" required></p>
            <p class = "ex2">Phone Number:*<br/><input type ="number" name="number" required></p>
            <p class = "ex2">Comments:<br/><textarea rows ="4" columns="50"></textarea></p>
            <p class = "ex2"><input type="submit" value="Submit"></p>
        </form>
        
    </section> 

    
    <footer>
        <p class = "ex3">&copy; 2016 myfirstwebpage.com</p>
    </footer>
</body>
</html>

GreezyJeezy · June 1, 2016

Go on w3school, it's the best for HTML and CSS

79wjd · June 1, 2016

8 minutes ago, GreezyJeezy said:

Go on w3school, it's the best for HTML and CSS

I've gone through the entire tutorial, but I dont really know where to go now.

GreezyJeezy · June 1, 2016

1 minute ago, djdwosk97 said:

I've gone through the entire tutorial, but I dont really know where to go now.

Just go on w3 look up what you want to learn and it will tell you how to do it, then you alter it to your needs, and remember it so you can use it with out looking it up.

what is something you need to know what to do?

79wjd · June 1, 2016

1 minute ago, GreezyJeezy said:

Just go on w3 look up what you want to learn and it will tell you how to do it, then you alter it to your needs, and remember it so you can use it with out looking it up.

what is something you need to know what to do?

tiered navigation bar, fixed navigation bar at the top of the screen, search box, putting paragraphs side by side.

Sure, I could look up most of those and get something, but I dont want to end up just cutting and pasting, which is basically what happened with the horizontal nav bar.

GreezyJeezy · June 1, 2016

2 minutes ago, djdwosk97 said:

tiered navigation bar, fixed navigation bar at the top of the screen, search box, putting paragraphs side by side.

Sure, I could look up most of those and get something, but I dont want to end up just cutting and pasting, which is basically what happened with the horizontal nav bar.

Well you can copy and paste, it you can look at it and manually type it so you remember and learn the syntax.

to make a fixed bar just made a bar using a div and make a CSS class for that did and just put

Position: fixed; in the class for that said Devon, then you can position it in the CSS code for it too

79wjd · June 1, 2016

1 hour ago, GreezyJeezy said:

Well you can copy and paste, it you can look at it and manually type it so you remember and learn the syntax.

to make a fixed bar just made a bar using a div and make a CSS class for that did and just put

Position: fixed; in the class for that said Devon, then you can position it in the CSS code for it too

I used this as a basis and started to play around with it, but I'm having some trouble. I can't get the logo to show up (clearly I'm doing that part wrong -- I want it to scroll with the nav bar). I want the nav bar to be in the top right and the logo in the top left. I figure I'll worry about getting it to look right outside of full screen after I get it working properly in full screen.

http://stackoverflow.com/questions/28452235/make-a-nav-bar-stick-to-the-top-when-scrolling-with-css


<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <!meta name="keywords" content="stuff">
    <!meta name="description" content="things">
    <title>Document</title>

    <link rel="stylesheet" type="text/CSS" href="main.css">
    <script src="jquery-2.2.4.js"></script>
</head>

<body>    
    <div class="headercss">
        <div class="headerlogo"> 
            <a href="#home">
            <img src="Pictures/Logo.jpg" 
            alt="ITdf.com"
            style="float:left; width:150px;height:150px;"/> </a>

        </div>
            <div class="nav">
                <ul>
                <li><a href="#home"> <br>Home</a></li>
                <li><a href="#about"><br>About</a></li>
                <li><a href="#ourbusiness"><br>Our Business</a></li>
                <li><a href="#demo"><br>Demo</a></li>
            </ul>
        </div>
    </div>


</body>
</html>


body {
    margin: 0px;
    background-color: #000000;
    height: 2000px;
}


/* 1. HEADER */

.headercss {
    width: 100%; 
    height: 100px;
    background-color: black;
    position: fixed;
}

.headerlogo {
    width: auto;
    height: 250px;
    background-color: #272727;
    position: fixed;
}

.nav {
    width: 100%;
    height: 100px;
    background-color: #272727;
    position: fixed;
    overflow: hidden;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0% 0% 0% 50%;
    float:left;
    width:40%;
    overflow: hidden;
}


li {
    float: left;
    width:25%;
    min-width: 243px;
    overflow: hidden;
}

a:link, a:visited {
    display: block;
    height: 68px;
    min-width: 243px;
    font-size: 20px;
    color: #FFFFFF;
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    background-color: #272727;
    text-align: center;
    text-decoration: none;
    font-family: 'Raleway', Arial;
    letter-spacing: 6pt;
    line-height: 150%;
    overflow: hidden;
}

a:hover, a:active {
    background-color: #242424;
}

GreezyJeezy · June 1, 2016

25 minutes ago, djdwosk97 said:

I used this as a basis and started to play around with it, but I'm having some trouble. I can't get the logo to show up (clearly I'm doing that part wrong -- I want it to scroll with the nav bar). I want the nav bar to be in the top right and the logo in the top left. I figure I'll worry about getting it to look right outside of full screen after I get it working properly in full screen.

http://stackoverflow.com/questions/28452235/make-a-nav-bar-stick-to-the-top-when-scrolling-with-css

Reveal hidden contents


<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <!meta name="keywords" content="stuff">
    <!meta name="description" content="things">
    <title>Document</title>

    <link rel="stylesheet" type="text/CSS" href="main.css">
    <script src="jquery-2.2.4.js"></script>
</head>

<body>    
    <div class="headercss">
        <div class="headerlogo"> 
            <a href="#home">
            <img src="Pictures/Logo.jpg" 
            alt="ITdf.com"
            style="float:left; width:150px;height:150px;"/> </a>

        </div>
            <div class="nav">
                <ul>
                <li><a href="#home"> <br>Home</a></li>
                <li><a href="#about"><br>About</a></li>
                <li><a href="#ourbusiness"><br>Our Business</a></li>
                <li><a href="#demo"><br>Demo</a></li>
            </ul>
        </div>
    </div>


</body>
</html>

Reveal hidden contents


body {
    margin: 0px;
    background-color: #000000;
    height: 2000px;
}


/* 1. HEADER */

.headercss {
    width: 100%; 
    height: 100px;
    background-color: black;
    position: fixed;
}

.headerlogo {
    width: auto;
    height: 250px;
    background-color: #272727;
    position: fixed;
}

.nav {
    width: 100%;
    height: 100px;
    background-color: #272727;
    position: fixed;
    overflow: hidden;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0% 0% 0% 50%;
    float:left;
    width:40%;
    overflow: hidden;
}


li {
    float: left;
    width:25%;
    min-width: 243px;
    overflow: hidden;
}

a:link, a:visited {
    display: block;
    height: 68px;
    min-width: 243px;
    font-size: 20px;
    color: #FFFFFF;
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    background-color: #272727;
    text-align: center;
    text-decoration: none;
    font-family: 'Raleway', Arial;
    letter-spacing: 6pt;
    line-height: 150%;
    overflow: hidden;
}

a:hover, a:active {
    background-color: #242424;
}

If you want it to say at the top you have to make a class like this

(Mobile doesn't have code tags and the /code won't work)

.top {

postion: fixed;

width:

}

and in the HTML just but that class in your div that has the logo and nav bar.

79wjd · June 1, 2016

6 minutes ago, GreezyJeezy said:

If you want it to say at the top you have to make a class like this

(Mobile doesn't have code tags and the /code won't work)

.top {

postion: fixed;

width:

}

and in the HTML just but that class in your div that has the logo and nav bar.

So add that to the .css file, and then add

<div class="top"></div>

under <div class="headerlogo">, and then just leave everything else the way it is?

GreezyJeezy · June 1, 2016

1 minute ago, djdwosk97 said:
So add that to the .css file, and then add
<div class="top"></div>
under <div class="headerlogo">, and then just leave everything else the way it is?

Yeah if your nav bar is a class too just add that "top" class to that too, so like <div class ="top,headerlogo">

i think , to separate two classes or its ; it's been awhile since I used HTML and CSS so I don't remember,

or or you can just add postion: fixed; to your navbar class,

79wjd · June 1, 2016

2 minutes ago, GreezyJeezy said:

Yeah if your nav bar is a class too just add that "top" class to that too, so like <div class ="top,headerlogo">

i think , to separate two classes or its ; it's been awhile since I used HTML and CSS so I don't remember,

or or you can just add postion: fixed; to your navbar class,

I added position: fixed to my nav class. The nav bar stays at the top, but I can't manage to get the image/logo to stay at the top along with the nav bar. Before when I didn't have the nav bar scroll with the screen I had the image float: left and it worked how I wanted (it just didn't move when you scrolled).

GreezyJeezy · June 1, 2016

18 minutes ago, djdwosk97 said:

I added position: fixed to my nav class. The nav bar stays at the top, but I can't manage to get the image/logo to stay at the top along with the nav bar. Before when I didn't have the nav bar scroll with the screen I had the image float: left and it worked how I wanted (it just didn't move when you scrolled).

Add postion fixed to the logo then, but if you float it sometimes it won't stay in the spot you floated it, like it will go in the middle, but sometimes it works just try it

79wjd · June 1, 2016

17 minutes ago, GreezyJeezy said:

Add postion fixed to the logo then, but if you float it sometimes it won't stay in the spot you floated it, like it will go in the middle, but sometimes it works just try it

I have position: fixed under logo too.

.headercss {
width: auto;
height: 320px;
background-color: black;
position: fixed;
}

.headerlogo {
width: auto;
height: 150px;
background-color: #272727;
position: fixed;
}

.nav {
width: 100%;
height: 150px;
background-color: #272727;
position: fixed;
overflow: hidden;
}

<div class="headercss">
       <div class="headerlogo">
<a href="#home">
<img src="Pictures/Logo.jpg"
alt="IT.com"
style="float:left; width:150px;height:150px;"/> </a>
       </div>
  <div class="nav">
    <ul>
               <li><a href="#home"><br/>Home</a></li>
               <li><a href="#about"><br/>About</a></li>
               <li><a href="#ourbusiness"><br/>Our Business</a></li>
               <li><a href="#demo"><br/>Demo</a></li>
           </ul>
       </div>
</div>

GreezyJeezy · June 1, 2016

Screenshot of how it's acting on the site?

GreezyJeezy · June 1, 2016

And I would stay away from inline CSS if I were you

GreezyJeezy · June 1, 2016

id try to keep the stuff I between the < > on the same line, just easier to read imo

79wjd · June 1, 2016

10 minutes ago, GreezyJeezy said:

And I would stay away from inline CSS if I were you

The css is in separate file, I just consolidated it to make it easier to see.

The logo doesn't even show up.

If I put the image code outside of the headerlogo class (directly under headercss and right before the nav class) then the logo sits above the nav bar, if it put it after the nav class then it shows up below the nav bar, and if I put it in the nav class then it covers the nav bar.

GreezyJeezy · June 1, 2016

1 hour ago, djdwosk97 said:

The css is in separate file, I just consolidated it to make it easier to see.

The logo doesn't even show up.

If I put the image code outside of the headerlogo class (directly under headercss and right before the nav class) then the logo sits above the nav bar, if it put it after the nav class then it shows up below the nav bar, and if I put it in the nav class then it covers the nav bar.

are you using float to position it? becase that way it can float on top of the nav bar

Cruorzy · June 2, 2016

I used Lynda to get deeper knowledge about HTML, but once you know the basics you should try stuff yourself i guess.

After that you know what to google, if you want to do HTML corretly its all about naming the stuff the right way, this can take a while to learn.

Also using the right tags for the right aspects, so you can make your website e reader friendly.

This means that you give the e reader the information where the important stuff is, so it wont read useless links or logo's that are located on your website.

The most annoying thing will be CSS in my experience, you always have a idea how it is going to look and thing can be a bit hard sometimes.

And while it is working you can always take your phone and try it on that, and cry after you have seen how it raped your website.

But start small start building it for pc only use try to get control over different resolutions, then try to make it more mobile friendly.

you can do alot with HTML5, something im not familiar about with yet.

You can create games in HTML5 if you wanted to.

Sign In

Learning HTML

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Create an account or sign in to comment

Create an account