basic text website for web design class need pointers [closed] - html

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I am taking a web design class and the assignment is to ,make a basic text site with the following requirements link to external page
image embedded from a website.
bold
italics
carriage return
list
font color change
font face change
comments
title
Heading <h1> <h2> etc...
Before I turn it in I was wondering if the code is clean enough and where would rate it on a scale of 0 to 100?
<!DOCTYPE html>
<html>
<head>
<title>DJ Khaled key to success</title>
</head>
<!---https://twitter.com/djkhaled/status/649808000987865088-->
<style>
body {
background-image: url("http://i-cdn.phonearena.com/images/articles/168223- image/First-HTC-One-M9-wallpaper.jpg");
background-color: #cccccc;
background-size: 1400px 675px;
background-repeat: no-repeat;
}
</style>
<body>
<font color="#0099ff"face="arial" size="7"><i>The key to more success is coco butter!</i></font></br>
<img src="https://usatftw.files.wordpress.com/2015/12/khaled1.gif?w=1000http://i.imgur.com/qsoXB3G.gif> width="300" height="230">
<br><b>click the gif above for the key to success</B><br>
<h1>The keys to success -by DJ Khaled</h1>
<ol>
<li><b>The key is to make it.</b></li>
<li><b>Another one.</b></li>
<li><b>Key to more success is clean heart and clean face.</b></li>
<li><b>Smh they get mad when u have joy.</b></li>
<li><b>There will be roadblocks but we will overcome them.</b></li>
<li><b>You smart! You loyal! You're a genius!</b></li>
<li><b>Those that weather the storm are the great ones.</B></li>
<li><b>I changed a lot</b></li>
<li><b>They don't want you to jet ski.</b></li>
<li><b>I can deal with everything. I got the answer for anything.</B></li>
</body>
</html>

I want to point out some changes you can make that can improve your design and help with maintenance in the long run.
Indent your code appropriately. Most IDE/editors already do these for you.
Why do this?
- Easier to read and manage.
Use external cascading stylesheets instead of style tags or inline styles.
Why do this?
You keep your html files small and not bloated.
It is easy to maintain, you only have to go to that file as oppose to having to scroll and use find and replace features, if your html gets any bigger you'll be pulling your hair out especially if you have heavy nesting.
It is also a way to separate your presentation logic from your
markup.

The title of the page is grammatically wrong. It should be:
<title>DJ Khaled's key to success</title>
Here is a JSFIddle with the changes: JSFiddle
I have removed the css and put it in a seperate stylesheet.
I have changed the <B> tags to <b> tags. And also, your src tag had errors,and I have changed that.

Instead of <b> and <i> you should consider <strong> and <em> (they give the highlighted text some meaning, other than a bold and italicized section). Also the <font> tag is now deprecated and should not be used (if it's class requirement, you should comment that to your tutor).
Your <style> tag is outside of the <head>
And also some of your tags are using uppercase text while others are lowercase.

Related

Why do <a> tags actually exist? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I was just wondering about this. Why do <a> tags actually exist? Surely the better way to add a link to an element is by allowing an href on any element so that it can function as a link to another place.
For example say, currently you have an album:
<div class="album">
<a class="album__link" href="[url]">
<img src="[source]" class="album__photo" />
<h2 class="album__title">[title]</h2>
</a>
</div>
Surely the above could be better written like:
<div class="album" href="[url]">
<img src="[source]" class="album__photo" />
<h2 class="album__title">[title]</h2>
</div>
Just wondered what everyones thoughts on this were. Might be a silly question but if I don't ask then I won;t get to hear what anyone else thinks will I?
You can already do
<a class="album" href="[url]">
<img src="[source]" class="album__photo" />
<h2 class="album__title">[title]</h2>
</a>
in HTML5. What is the problem with this? A <div> does not have any meaning, so I don't think it is necessary here. If you need a block container, just set display: block on your link (.album) from CSS.
What makes you think <a> is an unnecessary tag? Are there any necessary tags in your view? How do you plan supporting link-related features that are currently handled by <a> (target, rel, hreflang, etc.)?
The idea of using href on any element was a feature of the now abandoned XHTML 2.0. However, it causes too many problems.
Many HTML elements already have click activation behaviour that would clash with the link behaviour, so web authors would have to remember which elements href could be used on, and which couldn't.
Also, the href attribute doesn't live on its own. It comes with others like target, download, rel, hreflang and type which would also need to be put on each element. That in turn would cause a clash with the meaning of the type attribute on other elements.
So it has been considered, and it's just too messy, compared with having a dedicated element to do the job.
The difference between setting href="" to a <div> and an <a> is that they have different display types. On a <div> it will select the whole block (display: block;) so you can click everywhere in the div and open the link and on an <a> it will only select the text.

Purpose of the <head> and <body> tags [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to know what is the purpose of head and body tag.
Like when i use <title> tag in <body> section ,i got the same thing and when i use <p> tag in <head> section ,that i got the same thing which i used to get in <body> section,So what is concept to define a body or head section.
Or It is only understanding that this kind of tag will use in body section and these tag will be used in head section.
It will be better if you can provide me concept document too for this.
As per the MDN on <head>:
The HTML <head> element represents a collection of metadata about the
document, including links to or definitions of scripts and style
sheets.
What this is basically saying is that everything that goes in the <head> tag is not seen by the user (basically), but is used to include relevant information and dynamic content that is processed by the browser.
About the <body> tag:
The HTML <body> element represents the content of an HTML document.
There is only one <body> element in a document.
This means that everything that the user sees on the page goes in the <body> tag (basically), and that there is only one.
Do some research yourself, and see what else you can find!
The head tag is basically used to bring in necessary CSS and JS as well as define some meta information about the page. Items in the body tag are generally what is actually rendered.
There is a lot more to it, but that is the difference in its most basic form. You don't want to be using the title tag in the body. Any sort of semantic piece that is used to render the page should be in the body.

Which approach is better :- having 2 classes in html tag or 2 classes with same property [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Please help me determine which of the approach is better(having 2 classes in html tag or 2 classes with same property) and why?
Approach 1
<html><body>
<p class="redColor buttonHeight"> button Red</p>
<p class="blueColor buttonHeight"> button Blue</p>
</body></html>
.redColor{color:red}
.blueColor{color:blue}
.buttonHeight{height:10px}
Approach 2
<html><body>
<p class="redColorHeight"> button Red</p>
<p class="blueColorHeight"> button Blue</p>
</body></html>
.redColorHeight{color:red}
.blueColorHeight{color:blue}
.redColorHeight,.blueColorHeight{height:10px;}
Try making your classes more general and give them names implying their purposes instead of their implementation, Such as button-important and button-info. Calling a CSS class in very specific name like redButton isn't really a good practice.
I believe this is a better practice:
<p class="button button-important"> button Red</p>
<p class="button button-info"> button Blue</p>
.button {
height: 10px;
}
.button-important {
color: red;
}
.button-info {
color: blue;
}
It's all about which properties you want to extract as common. E.g. if all buttons in your app should be the same height, use an approach suggested by Itay. Place height def in style of button class. If it is not a case and you don't want to keep them exactly same height you can use the second approach.
Css gives us a classes and we shoul use them as a classes. I mean use them in similar way as classes in java. A class describes some common properties of objects. Here I see a button object. There is no color nor height object :-)
You can check for example twitter bootstrap framework. Just go to bootstrap page, open a DOM viewer in your favorite browser and analyse how there are particular "components" described by classes.

How do I set text color? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
Title explains it all, please note I would just Google this but for some reason my computer is having a hard time connecting to the internet at the moment, so I had to write this on my phone with really awful web formatting.
EDIT: On a real computer now, to clarify I needed to set the text color of a string in an HTML document, preferably through CSS. Just something simple, like this:
<!DOCTYPE html>
<body>
The word <whatever styling here...>RED<end styling...> should be red!
</body>
I wasn't able to try much at the time I posted this, since my computer was having internet trouble, so I didn't really know what to do.
Try this
<span style="color: yourColor">your text</span>
<p style="color:red;">pizza</p>
in html
p{
color:red;
}
like that in css
for an inline style
<p style="color: blue"> text here </p>
if you want css with classes / ids ect..
put this in css file or in a script tag on your page:
.textColor
{
color: blue;
}
then add the class to the element
<p class="textColor"> text here </p>
<p class="attention"></p> in your html
.attention{
color:red;
}
in your css file, eg. my_styles.css which you include in the HEAD of your html, e.g.
<head>
<link rel="stylesheet" type="text/css" href="my_styles.css">
</head>
The above is if attention will appear more than once.
If it will never appear more than once you can use an id instead of a class, e.g.
<p id="attention"></p> in your html and
#attention{
color:red;
}
in your css file
You can use this
<font color='red' >your text here</font>
By this you can set the desired color for us text . You can also use the hexadecimal format here .

how to use HTML5 tags properly? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Being very new in web designing I was wandering, how should i properly use HTML5 tags. Taking an particular example. I want to put some content in the middle of the page. So in HTML4 I write.
<div class="content-container">
<div class="left-content"></div>
<div class="right-content"></div>
</div>
but to use HTML5 properly should I write the same code as .
<div class="content-container">
<article class="left-content"></article>
<aside class="right-content"></aside>
</div>
I am really confused about properly using the tags. Pardon me if that was a dumb question. cheers!
What you need is understanding the HTML5 semantics elements. Here is a quick and easy-understood explanation for you from HTML5 doctor
However, you can search with the keyword "HTML5 semantic" for more details.
For the syntax: Dont close the tags with
</div>
It should be:
<article class="left-content"></article>
<aside class="right-content"></aside>
These tags are used to tell what kind of content is inside them, for example if a screen reader reads your html, it can tell what it should read and what not through these tags.
The reason is partly the support of screen readers. If you have a sight disability (e.g. are blind) and have to rely on screen readers to read the content aloud, this helps the screen reader to discern between actual content and, say ads or footers.
It's really easy: When you open a tag you have to close it.
<div class="content-container">
<article class="left-content"></article>
<aside class="right-content"></aside>
</div>
There are some void elements which don't allow to have contents and don't need a closing tag:
area, base, br, col, command, embed, hr, img, input, keygen,
link, meta, param, source, track, wbr
Example:
<br>
<meta name="description" content="This is a meta tag">
A full list of all HTML5 elements and their meaning you'll find here.