HTML and CSS = Website: 2011

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.

Tuesday, April 12, 2011

Tuesday(Progress.)

Today I was working on the main website bu I decide to created the other like the biography of the musician and the result of the website here and images and the link.
Main page.
Biography.

and here a picture of both of the HTML the old and the new I'm working on.

My HTML

and the other HTML.
This biography is not done yet I will keep working during this week and try to finished this week.

Monday, April 11, 2011

Monday(4/11/11)

I was working today on the new website and something that is interesting that this musician have a website already. Which is www.franklinpalomeque.com and now the idea is to improve the website so tomorrow I will talk to the musician and see if he want me to used the other website and but now I just start.

And I here the HTML of both website:

The Original.

The one I am working on.

Friday, April 8, 2011

Friday (Finally a commands to create a video player)

I was working on the new website and Finally I found a tutorial , of how to create a video player for your website.

This is the command of the video player.

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
</video>

Video player Picture.

However in the tutorial it say that the browser don't support the video ta. But here is where this the link to the tutorial.

I move the website to the server and here is the link of the website and a direct link to the video which will not play nothing because it doesn't have any video in the source. Next week I will try to put a short video to see how this work.

Thursday, April 7, 2011

Thursday(4/7/11)

I was working on the links of the website and but I will setting up margin and padding and first of all work on the body part and then on the links and the other things. but for now just some pictures of the beginning of this website.

HTML

CSS

Wednesday, April 6, 2011

New quarter

For this quarter I will be working on a new website, this website is about musician.
Today I star working on the website and I got some pictures because I am not working on the server right now.

Here the website.

And the HTML which is the how you start a website.

I will try to get the website done by the end of this quarter or try to finished.Tomorrow I will start working on the CSS.

Tuesday, March 29, 2011

Tuesday(3/29/11)

Today I was working on the CSS and I got 10 errors int he CSS.

I will used this (/* commands */) to disable the command and see how the website look.

Monday, March 28, 2011

Monday(3/28/11)

I was Working on the website today and I apply this command that combine the (h1, h2, h3) here is the picture of the CSS.

Here also the Txt.

h1, h2, h3{ 
 color:#BD8100;
 font-family: Baskervilla, "Palatino Linotype", Times, serif;
 border-top: 2px solid #81A100;
 padding-top: 7px;
 padding-left: 100px;
 font-size: 28px;
 line-height: 44px;
}

And here you will see the effect.
Website.

Friday, March 25, 2011

Friday (3/25/11)

I was working the aside bar today but for that I made the website look different because I'm using some other effect that are not in the CSS: The Missing Manual.
The Website now.

Image:

And the CSS that combine CSS: The Missing Manual and other from another example.

Next week I would made it look more the same way it was before.

Thursday, March 24, 2011

Thursday(3/24/11)

Working on a the website and I have a problem because a sidebar(aside) should show of the right like this on in this website.

But on my website the (aside) is on the bottom, tomorrow I will work on this issue.

Wednesday, March 23, 2011

Wednesday(3/23/11)

Yesterday after I put the image in my website I got two errors but today I fix it. Now the website doesn't have errors.
Picture of the validator.

During this week I was looking for a simple tutorial about VIM and here is one of the tutorial.
Tomorrow I will try to take out the menu bar and put a (aside) bar on the left side. This is not included in the CSS: The Missing Manual , how to made this is from another turial.

Tuesday, March 22, 2011

Tuesday(3/22/11)

I was working on the example where they show you how to put a picture in the page, I add the picture and now I have two problems which I will try to fix tomorrow.
The website here. WEBSITE.

Monday, March 21, 2011

Monday(Error Fix it) Doing the Ch.3

Last week on Friday I check the CSS of this website and I get and error of the CSS here a picture of the error.

the problem was a missing semi-colon after the background: url("nav_background"), but today I fix it and now look at the website validate.

Here is the CSS with the error.

Here the error is fix it.

============================================
Today after I fix the error on my page, i move to the Ch.3 of the missing manual and I add this:

Here is the CSS .

I read an example but I Would do the example tomorrow.

Friday, March 18, 2011

Friday "working on the website"

Today finally i get back to work and here a picture and the link of the website and how it looks no; however there is an error in the CSS that I will be working on next week.

Link to the CSS.

Image if the website.

Thursday, March 17, 2011

Working on Ch.3

Finally I get into the website where the book is. Tomorrow I will try to make some change on how this website look; however the website will not look that different by the end of tomorrow and in this website for now will have some on old CSS.

Tuesday, March 15, 2011

No Progress.

I was trying to log in into the website where the manual of CSS is but I don't why the didn't let log in . Today I didn't get done anything because of that reason but hopefully by tomorrow I will be ready to continue practicing the examples of the Book i am reading.

Monday, March 14, 2011

Monday(The Website)

Last week I worked on the website and on this weekend I will try to finished the menu bar of the website. Here is a picture of the Website.

Today I will not included the Image of the CSS. However I will included a picture of the HTML.

Today I didn't continue the CSS: The Missing Manual because I could not log in where this book is. I will try to work on the CSS tomorrow and by the end of this week I will try to have a better website with more style.