Get up to 80 % extra points for free! More info:

Discussion: my first website... html page

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

Activities
Avatar
VINCENT EVERGREEN
Member
Avatar
VINCENT EVERGREEN:2/3/2017 15:04

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

<head>

<meta charset="utf-8"/>
<link rel="styesheet" href="style.css" type="text/css" />
<title>index.html</ti­tle>
</head>
<body>

<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="contactpa­ge.html"> CONTACT PAGE </a> thank you and you are highly welcome.</p>

</body>
</html>

 
Reply
2/3/2017 15:04
Avatar
IT Man
Member
Avatar
Replies to VINCENT EVERGREEN
IT Man:2/3/2017 16:42
  1. You can write anything in title, not just name of file.
  2. 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
Avatar
VINCENT EVERGREEN
Member
Avatar
Replies to IT Man
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
Avatar
VINCENT EVERGREEN
Member
Avatar
Replies to VINCENT EVERGREEN
VINCENT EVERGREEN:2/3/2017 16:51

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

Accepted solution
+5 Experiences
Problem solution
 
Up Reply
2/3/2017 16:51
Avatar
IT Man
Member
Avatar
Replies to VINCENT EVERGREEN
IT Man:2/4/2017 2:17

Yes, link should be in head. :)

 
Up Reply
2/4/2017 2:17
Avatar
VINCENT EVERGREEN
Member
Avatar
Replies to VINCENT EVERGREEN
VINCENT EVERGREEN:2/5/2017 9:10

Give me the example ... Please...

 
Up Reply
2/5/2017 9:10
Avatar
David Capka Hartinger
Owner
Avatar
Replies to VINCENT EVERGREEN
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.
Avatar
VINCENT EVERGREEN
Member
Avatar
Replies to David Capka Hartinger
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
Avatar
David Capka Hartinger
Owner
Avatar
Replies to VINCENT EVERGREEN
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.
Avatar
lawrence njoroge
Member
Avatar
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/lo­go.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="">DOWNLO­ADS</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="">facebo­ok</a></li>
<li><a href="">twitter</a></li>
<li><a href="">linke­din</a></li>
</ul
</div>
<div>
<h2>Related stories</h2>
</div>

</aside>

<footer class="page_fo­oter">
©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,ar­ticle,section,fo­oter,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
Avatar
lawrence njoroge
Member
Avatar
Replies to David Capka Hartinger
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
Avatar
lawrence njoroge
Member
Avatar
Replies to lawrence njoroge
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
Avatar

Member
Avatar
Replies to lawrence njoroge
: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
Avatar
lawrence njoroge
Member
Avatar
Replies to
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
Avatar

Member
Avatar
Replies to lawrence njoroge
: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
Avatar
lawrence njoroge
Member
Avatar
Replies to
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
Avatar
lawrence njoroge
Member
Avatar
Replies to
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
Avatar
IT Man
Member
Avatar
Replies to lawrence njoroge
IT Man:2/15/2017 10:32

You can tag his comment as resolution with ✓. :)

 
Up Reply
2/15/2017 10:32
Avatar

Member
Avatar
Replies to IT Man
:2/19/2017 12:08

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

 
Up Reply
2/19/2017 12:08
Avatar
David Capka Hartinger
Owner
Avatar
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.
Avatar
Daniel Vitek
Member
Avatar
Replies to David Capka Hartinger
Daniel Vitek:2/19/2017 14:19

I am :P

 
Up Reply
2/19/2017 14:19
Avatar
IT Man
Member
Avatar
Replies to
IT Man:2/19/2017 16:28

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

 
Up Reply
2/19/2017 16:28
Avatar

Member
Avatar
Replies to David Capka Hartinger
:2/19/2017 16:29

I am too :P I have nothing better to do anyway :D

 
Up Reply
2/19/2017 16:29
Avatar
lawrence njoroge
Member
Avatar
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
Avatar

Member
Avatar
Replies to lawrence njoroge
: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
Avatar
mick
Member
Avatar
mick:9/19/2022 2:55

Thanks for this interesting information!

 
Up Reply
9/19/2022 2:55
Avatar
mick
Member
Avatar
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
Avatar
Gaurav Negi
Member
Avatar
Gaurav Negi:8/2/2023 10:46

Well, there are some logical issue with your code:

Try below code once for better output.

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

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>index.html</title>
</head>

<body>
    <h1> WELCOME TO MY FIRST WEBSITE</h1>
    <img src="web photos\candles.jpg" alt="vin the programmer">
    <p>My name is <strong>VINCENT EVERGREEN N.</strong> this 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>

Thanks

 
Up Reply
8/2/2023 10:46
Avatar
Gaurav Negi
Member
Avatar
Replies to VINCENT EVERGREEN
Gaurav Negi:9/20/2023 11:27

Question is old however I would like to give my opinion on this.
Well, you have missed CSS link, you can try belos code where CSS link has been added.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>index.html</title>
</head>
<body>
    <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 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>

Thanks

 
Up Reply
9/20/2023 11:27
Avatar
Adoro
Member
Avatar
Adoro:7. May 3:42

Browse the latest collection of shoes for men at Adoro. Find the perfect pair for any occasion and elevate your style with our fashionable and comfortable footwear.

 
Up Reply
7. May 3:42
Avatar
Nishat Linen
Member
Avatar
Nishat Linen:8. May 6:14

Discover Pakistani summer dresses Nishat Linen's latest collection! Vibrant hues, intricate embroidery, and lightweight fabrics for your stylish season. Explore now!

 
Up Reply
8. May 6:14
Avatar
Ammara Khan
Member
Avatar
Ammara Khan:8. May 8:13

Checkout Ammara Khan's latest long shirts for girls! Stylish, comfortable, and perfect for any occasion. Elevate her wardrobe with our trendy designs!

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

32 messages from 32 displayed.