Discussion: my first website... html page

In the previous quiz, Online HTML and CSS Quiz, we tested our experience gained from the course.

Activities

VINCENT EVERGREEN

Member

VINCENT EVERGREEN:2/3/2017 15:04

<!doctype html>
<html lang="en">

<head>

<h1> WELCOME TO MY FIRST WEBSITE</h1>
<img src="web photos\candles.jpg" alt="vin the programmer>
<p>My name is <h2><strong>VINCENT EVERGREEN N.</strong></h2> this is is my first website. i am learning html and web design with tutorials at <a href="http://www.ict.social"> ICT.SOCIAL</a>
To know more about me, visit my <a href="contactpage.html"> CONTACT PAGE </a> thank you and you are highly welcome.</p>

</body>
</html>

2/3/2017 15:04

IT Man

Member

IT Man:2/3/2017 16:42

You can write anything in title, not just name of file.
h2 is separate tag. It shouldn't be in p. You can use this:

<p>My name is <span class="name">Vincent Evergreen N.</span> and this is my first website. ...

And then add into style.css this:

.name {
    font-size: 1.2em;
}

Up Reply

2/3/2017 16:42

VINCENT EVERGREEN

Member

VINCENT EVERGREEN:2/3/2017 16:49

My main challenge is how And where to put my link to CSS page In the html document... Please start the linking from the head so that I can get the linking steps... Thanks IT MAN

Up Reply

2/3/2017 16:49

VINCENT EVERGREEN

Member

VINCENT EVERGREEN:2/3/2017 16:51

The place I inserted the "link" tag, is that its position?...

Accepted solution
+5 Experiences

Up Reply

2/3/2017 16:51

IT Man

Member

IT Man:2/4/2017 2:17

Yes, link should be in head.

Up Reply

2/4/2017 2:17

VINCENT EVERGREEN

Member

VINCENT EVERGREEN:2/5/2017 9:10

Give me the example ... Please...

Up Reply

2/5/2017 9:10

David Capka Hartinger

Owner

David Capka Hartinger:2/5/2017 13:52

You got a typo in the word "styesheet" ;-)

Up Reply

2/5/2017 13:52

You can walk through a storm and feel the wind but you know you are not the wind.

VINCENT EVERGREEN

Member

VINCENT EVERGREEN:2/5/2017 14:07

Irrespective of that... still its not advancing... corrected. Should i rewrite the html codes together with the css'..

Up Reply

2/5/2017 14:07

David Capka Hartinger

Owner

David Capka Hartinger:2/5/2017 14:50

And what's the problem, CSS doesn't work at all? Can you post your CSS file as well or upload the whole website somewhere and post me the link so I can check it?

Up Reply

2/5/2017 14:50

You can walk through a storm and feel the wind but you know you are not the wind.

lawrence njoroge

Member

lawrence njoroge:2/10/2017 8:54

my aside content can get borders assist me please.
my html code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>GOOD LIVING</title>
<link rel="stylesheet" href="glv.css"/>
</head>
<body>
<div class="container">
<header>
<img src="images/logo.JPG" alt="logo area"class="logo"/>
<nav class="top_nav">
<ul>
<li><a href="">HOME </a></li>
<li><a href="">ABOUT </a></li>
<li><a href="">CONTACTS </a></li>
<li><a href="">DOWNLOADS</a></li>
<li><a href="">BLOG </a></li>
</ul>

</nav>
<div class="clear"></div>
</header>

<section class="left_side">
<article>
<header>
<h2> this is the article header<H2>
<h3>this is the subtitle</h3>
</header>
<p>this is paragraph 1</p>
<p>this is paragraph 2</p>
<footer>
-written by lawre
</footer>
</article>
</section>

<aside class="rigth_side">
<div>
<h2>social links</h2>
<ul>
<li><a href="">facebook</a></li>
<li><a href="">twitter</a></li>
<li><a href="">linkedin</a></li>
</ul
</div>
<div>
<h2>Related stories</h2>
</div>

</aside>

<footer class="page_footer">
©goodliving.com
</footer>
</div>

</body>
</html>

my css code
/*get rid of default margin and padding*/
*{
margin:opx;
padding:0px;
list-style-type:none;
}

header,nav,article,section,footer,aside{
display:block;
}
/*centering website*/
.container{
width:1000px;
margin:0px auto;
}

.clear{
clear: both;
}
.logo{
height:80px ;
width:100px;
float:left;
}
.top_nav{
float:left;
width:900;
}
.top_nav ul li{
float:left;
padding:35px 20px;

}
/*float aside and the main section*/
.left_side{
float:left;
width:700px;

}

.left_side article{
border:2px solid red;
margin-right:1opx;
padding:10px;
}
.right_side{
float:left;
width:300px;
}
.right_side div{
border:2px solid blue;
padding:10px;
margin:10px 0px;
}
/*make footer clear floated elements*/
.page_footer{
clear:both;
text-align:center;
}

Up Reply

2/10/2017 8:54

where there is will there is a way

lawrence njoroge

Member

lawrence njoroge:2/10/2017 9:49

well the website is not uploaded to the server

<!DOCTYPE HTML>
<html>
<head>
        <meta charset="utf-8"/>
        <title>GOOD LIVING</title>
        <link rel="stylesheet" href="glv.css"/>
</head>
        <body>
        <div class="container">
                <header>
                        <img src="images/logo.JPG" alt="logo area"class="logo"/>
                                <nav class="top_nav">
                                        <ul>
                                                <li><a href="">HOME </a></li>
                                                <li><a href="">ABOUT </a></li>
                                                <li><a href="">CONTACTS </a></li>
                                                <li><a href="">DOWNLOADS</a></li>
                                                <li><a href="">BLOG </a></li>
                                        </ul>

                                </nav>
                                <div class="clear"></div>
                </header>

                <section class="left_side">
                        <article>
                                <header>
                                        <h2> this is the article header<H2>
                                        <h3>this is the subtitle</h3>
                                </header>
                                <p>this is paragraph 1</p>
                                <p>this is paragraph 2</p>
                                <footer>
                                        -written by lawre
                                </footer>
                        </article>
                </section>

                <aside class="rigth_side">
                        <div>
                                <h2>social links</h2>
                                <ul>
                                        <li><a href="">facebook</a></li>
                                        <li><a href="">twitter</a></li>
                                        <li><a href="">linkedin</a></li>
                                </ul
                        </div>
                                <div>
                                        <h2>Related stories</h2>
                                </div>

                </aside>

                        <footer class="page_footer">
                                &copy;goodliving.com
                        </footer>
        </div>

        </body>
</html>

/*get rid of  default margin and padding*/
*{
        margin:opx;
        padding:0px;
        list-style-type:none;
}

header,nav,article,section,footer,aside{
        display:block;
}
/*centering website*/
.container{
        width:1000px;
        margin:0px auto;
}

.clear{
        clear: both;
}
.logo{
        height:80px ;
        width:100px;
        float:left;
}
.top_nav{
        float:left;
        width:900;
}
.top_nav ul li{
        float:left;
        padding:35px 20px;

}
/*float aside and the main section*/
.left_side{
        float:left;
        width:700px;

}

.left_side article{
        border:2px solid red;
        margin-right:1opx;
        padding:10px;
}
.right_side{
        float:left;
        width:300px;
}
.right_side div{
        border:2px solid blue;
        padding:10px;
        margin:10px 0px;
}
/*make footer clear floated elements*/
.page_footer{
        clear:both;
        text-align:center;
}

Up Reply

2/10/2017 9:49

where there is will there is a way

lawrence njoroge

Member

lawrence njoroge:2/10/2017 9:50

note that some pages are not made yet

Up Reply

2/10/2017 9:50

where there is will there is a way

Member

:2/11/2017 18:32

Hi Lawrence, I don't see you ask any question. Do you have any problem with your code?

Up Reply

2/11/2017 18:32

lawrence njoroge

Member

lawrence njoroge:2/13/2017 3:45

yes the aside tag cannot take my borders

Up Reply

2/13/2017 3:45

where there is will there is a way

Member

:2/13/2017 8:03

Hi Lawrence, I see tipo in your html code, you have rigth_side instead of right_side

<aside class="rigth_side">

Up Reply

2/13/2017 8:03

lawrence njoroge

Member

lawrence njoroge:2/15/2017 1:29

let me check

Up Reply

2/15/2017 1:29

where there is will there is a way

lawrence njoroge

Member

lawrence njoroge:2/15/2017 1:32

thankyou it working now 8-)

Up Reply

2/15/2017 1:32

where there is will there is a way

IT Man

Member

IT Man:2/15/2017 10:32

You can tag his comment as resolution with ✓.

Up Reply

2/15/2017 10:32

Member

:2/19/2017 12:08

No, he cannot this is not Lawrence's thread.

Up Reply

2/19/2017 12:08

David Capka Hartinger

Owner

David Capka Hartinger:2/19/2017 12:33

Is any of you guys interested in moderating the forums?

Up Reply

2/19/2017 12:33

You can walk through a storm and feel the wind but you know you are not the wind.

Daniel Vitek

Member

Daniel Vitek:2/19/2017 14:19

I am

Up Reply

2/19/2017 14:19

IT Man

Member

IT Man:2/19/2017 16:28

Oh, I see. Thanks for notice.
David Capka Hartinger, yes, no problem. HTML & CSS is my second home.

Up Reply

2/19/2017 16:28

Member

:2/19/2017 16:29

I am too I have nothing better to do anyway

Up Reply

2/19/2017 16:29

lawrence njoroge

Member

lawrence njoroge:2/21/2017 1:02

well guys thanks alot, am now trying to create a login system using php and no matter how i try i cant connect the pages to my local host server which is xampp any one who can help me please ill be greatiful

Up Reply

2/21/2017 1:02

where there is will there is a way

Member

:2/21/2017 17:08

You should create new thread in PHP forum - https://www.ict.social/php/php-forum
Don't forget to add your code inside tags for code so we can see what you got

Up Reply

2/21/2017 17:08

mick

Member

mick:9/19/2022 2:55

Thanks for this interesting information!

Up Reply

9/19/2022 2:55

mick

Member

mick:9/21/2022 4:30

QA engineers are responsible for testing the software's performance https://mlsdev.com . They check that different components are functional and that the solution provides a sufficient level of security. They also check compatibility with other applications. They also check for bugs in previously-tested code, especially when adding new features or updates. Moreover, they use automated testing tools to ensure that the software meets its specifications.

Up Reply

9/21/2022 4:30

PHP professional, $7000 a month. Like the sound of that? We'll get you there for $120.

Discover more...

PHP professional, $7000 a month. Like the sound of that? We'll get you there for $120.

PHP e-shop course

To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

27 messages from 27 displayed.