HTML and CSS = Website

Thursday, June 16, 2011

finall

For almost 2 week I was working on a project that Now is the final day to show it and I think it is ok but still I got to work.
Here the link.

While I was working I saw this command (hgroup)

Thursday, June 9, 2011

yesterday(6/8/2011)

I was working on the HTML of the Cd's websites and is almost done.
Here is an example of the links:

<p><a href="name">Download-Descargar</a></p>

this is one way and if we validate it doesn't give us error

but we can also do <a href="name">Download-Descargar</a> which

will be ok.

This week and the next one I will try modify

the style of all the pages.

Friday, May 27, 2011

Friday (5/27/11)

Finally today I finish the CD'S website but now I just need the link of the music so people can download.

New Link.

I work on the main website and here is the link.

The main menu have the same effect of the CD'S site but with a different color when you pass the mouse over it.

For the menu I used the same style of the CD'S.

The CSS. In the css if you notes some commands that look something similar to this one below is because is not making any effect to the website.

/*h4 {
 width: 900px;
 color: #d7ceb2;
        text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
        font: 21px 'BazarMedium';
        letter-spacing: 9px;
 margin-left: auto;
 margin-right: auto; 
 padding-top: 50px;
}*/

Thursday, May 26, 2011

Thursday(5/26/11)

The website about the CD'S is almost done I just need to style the way of the website. Here is the picture of the website and the new LINK.

Tomorrow I will try to put every individual CD'S a box like the contact website.
Here is the code I will be using.

<div class="center">
<div class="position">

</div>
</div>

Here the CSS which give the style.

div.center
{
padding:2px;
margin:auto;
width:80%;
}
div.position
{
padding:10px;
border:1px solid gray;
background-color:#000000;
}

Wednesday, May 25, 2011

The website of the musician in almost done but however today I was working on the CD's website putting the cd's photos and the names of them.
Here a new link of the website. I still got to work with the commands and separate the h4 from the nav because now the nav is on top of the h4.
Here is how the menu nav is done and i give the effects of hover.

nav {
 position: absolute;
 left: 0;
 width: 100%;
}
nav ul {
 margin: 0 auto;
 width: 940px;
 list-style: none;
}
nav ul li {
 float: left;
}
nav ul li a {
 display: block;
 margin-right: 20px;
 width: 140px;
 font-size: 14px;
 line-height: 44px;
 text-align: center;
 text-decoration: none;
 color: #777;
}
nav ul li a:hover {
 color: #fff;
 }
nav ul li.selected a {
 color: #fff;
}

Tomorrow I will try to finish this site (CD'S) and keep working in the

main website.

Tuesday, May 24, 2011

Tuesday(5/24/11)

This sis the website of the CD's I just start this webpage and give the style here the link of th website. The picture above is how the website look.

Here is something I found out today when I was about to put the picture is this.

If I put the command like this :

<img src="pictureback.jpg" alt="cuecasback"/>

This will not give you and error .

If you try it like this.

            <img src="picturefrom.jpg" />
            <img src="pictureback.jpg" />

This will give you errors.

And here is a link to the CSS.

Friday, May 20, 2011

Friday

Thursday, May 19, 2011

Video command...((5)(19)(11))

I was working on the feedback that my teacher give from last week. I was reading trough the book of HTML 5 NOW and I watch the video. I learn how to created the video player and here is the code

<!Doctype html>
<meta charset="utf-8">
<video controls>
<source src="here name of the video">
<source src="here name of the video ">
</video>

In the video said that if I do this command this way I can put different videos for several browser.
I will practice this command tomorrow and read more the book. I don't have a link to where I practice the commands but here is a picture but I don't have a video so I will try to put one tomorrow.

Thursday, May 12, 2011

Thursday(5/12/11)

Few days ago I was wondering how I can created a music player using HTML . and today looking in the Internet I found a example which look great but I want to look for another that has the play list to.

Here a picture of how the music player look.

and here it what make possible the music player.

<embed name="name of song"
width="300"
height="90"
loop="false"
autostart="false" />

I will look and try to find a better tutorial.

Wednesday, May 11, 2011

Wednesday(5/11/11)

Yesterday was no progress because

Monday, May 9, 2011

Monday(Creating the Contact Page)

I was working on the website I decide to work on the Contact page.

Here is a picture of the page.

and I used to create the box are:
<div class="center">
</div>
And
<div class="position">
</div>

This will created the the rectangle.
The CSS is this below.

div.center
{
padding:2px;
margin:auto;
width:80%;
}
div.position
{
padding:10px;
border:1px solid gray;
background-color:#000000;
}

Friday, May 6, 2011

Friday (5/6/11)

Today I was working on the website and I was trying to center the background-images of the main page and I was using the the margin-left.
Example:
{
      margin-left: 450px;
}
The margin above is not wrong but the way my teacher tell me to do If I want to center a background-image or other things is using:

{
      margin-left: auto;
      margin-right: auto;
}

This command will center the image or p,h1,and everything you want to center.
Images of the website before and after.

Before.

And here the website after using the margins.

New Link of the website.

I have not validate my website for a while but today I did and here is is the result.

The HTML.

Also the CSS Level 3.

Thursday, May 5, 2011

Thursday(5/5/11)

Working on the website of the Musician I decide to made the main more clean I should created another website and link from the main page to where all the content is going to be.

Here picture of the main page now.

and here is a link to the website where all the content is going to be it start to look nice.

WEBSITE.

Friday, April 29, 2011

Friday (4/29/11)

Working on the style of h1 today I decide to change the style and look here the style I used. and here the commands that make this possible.

        color: #d7ceb2;
        text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
        font: 80px 'BazarMedium';
        letter-spacing: 10px;

and the website this code came from.HERE.

Also I found this which is how to created button with pure CSS. I will study this and see how

this work and try to apply them to the website I'm working on.

Thursday, April 28, 2011

Thursday(4/28/11)

Working on the website and trying to find out what happen yesterday with the text-shadow. Today I was looking at the CSS file and I just take out the background of the h1.

And I re-validate the CSS file and it work and now I will be working on how made it lest bright because it is to much.
Here a picture after the validation .

Look above the green and it should say

(CSS level 3)

because if I try to validate in

(CSS level 2.1)

it will give me this error.

The link to the validation. Also the link of the website now.

Wednesday, April 27, 2011

Wednesday(4/27/11)

Today I was working on the website and thinking how to do the effects of the text of the (h1).Searching in Google I found this examples. Check this website which the tittle is "Using CSS Text-Shadow to Create Cool Text Effects".
I put this effects on h1

text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;

But this command give me 9 errors when I try to validate.

Here is the link to the website where I apply the effect above.

I will work on tomorrow to find out what happen.

Monday, April 25, 2011

Monday(4/25/11)

One week ago I was working on the website of the musician and I got the errors while I was trying to created a picture that when I pass the mouse over it will change. The commands I was using were .

The other Website with the errors.

This was the command I was using and which give a lot of errors.

Today that I return from the spring break my teacher fixed and tell me the way he did the same effect but he just used CSS. This is they way my teacher show me how to do it.

The Website.

This week I will try to created website for the Biograph, Cd's and the rest of the other pages.

Friday, April 15, 2011

Friday (4/15/11)

Today I work on I work on the website and now I used the display commands an the website look more clean and nice. But I still got some problems that I have to fix but those errors I will fix them Next week.

This errors happen because the commands on the picture

the errors star after the <p><img src"......................"></p>. I was trying to this way, <img src=""> without the <p>, but the picture would show up.
Next week I will try to find a tutorial to explain how to do it the right way and with out Errors.

LINK TO THE WEBSITE HERE.

Thursday(4/14/11)

Yesterday I was working on the website and I learn something new which is display. However I am not on the chapter of the CSS: The Missing Manual where they have example to work on, but I will be soon. My teacher tell me a website that explain how to used them and today I will try them..

website of example.

Wednesday, April 13, 2011

Wednesday(4/13/11)

This is the new looking of the website and there other links from yesterday don't work no more because I created a file (mkdir + name) and I put all the things of this website in that folder and the new link is of this website.
New link.

Now the picture of the HTML and what code I used to created the effect of the picture.

Tomorrow I will finished the picture and work on make a link link to but here is the link of where this effect is . This is not Java Script is pure HTML.