So , lately i tried to mess around with html , it went well , until i tried to add a link .
so link isn't working and it's taking me to the files directory where the html file is located and saying err_file_not_found
<!DOCTYPE html>
<title>hello World</title>
<head>Hello World !</head>
<header>2nd sentence</header>
<h1>3rd sentence</h1>
<h2>4th sentence</h2>
<h3>5th sentence</h3>
<h4>6th sentences</h4>
<h5>7th sentence</h5>
<h6>8th sentence</h6>
<p>this is a regular sentence.<br>
regular sentences contain many words.<br>
by the end of this day , i will learn new
things and remember old ones.<br>
i learned how to write words in
<em>diagonal</em> .<br>
i also learned how to write words in
<strong>bold</strong><br>
<ul>my first list
<p>list item 1</p>
<p>list item 2</p>
<p>list item 3</p>
<p>list item 4</p>
</ul>
<ol>my secon list
<p>list item 1</p>
<p>list item 2</p>
<p>list item 3</p>
<p>list item 4</p>
</ol>
<hr> some thing horizontal
<a href="www.wikipedia.org">this is an example
of a web page</a>
</p>
Make sure to use at URLs http:// or https:// before the URL (Depends on the Website, in Wikipedias Case https). In your case your Browser thinks that it is a file.
Just as a guide - to correct your HTML markup perhaps this will be useful as it encapsulates the comments I made above.
<!DOCTYPE html>
<html>
<head>
<title>hello World</title>
</head>
<body>
<header>2nd sentence</header>
<h1>3rd sentence</h1>
<h2>4th sentence</h2>
<h3>5th sentence</h3>
<h4>6th sentences</h4>
<h5>7th sentence</h5>
<h6>8th sentence</h6>
<p>
this is a regular sentence.<br>
regular sentences contain many words.<br>
by the end of this day , i will learn new
things and remember old ones.
<br>
i learned how to write words in
<em>diagonal</em> .
<br>
i also learned how to write words in
<strong>bold</strong>
<br>
<ul>
<li>my first list</li>
<li><p>list item 1</p></li>
<li><p>list item 2</p></li>
<li><p>list item 3</p></li>
<li><p>list item 4</p></li>
</ul>
<ol>
<li>my secon list</li>
<li><p>list item 1</p></li>
<li><p>list item 2</p></li>
<li><p>list item 3</p></li>
<li><p>list item 4</p></li>
</ol>
<hr> some thing horizontal
<a href="https://www.wikipedia.org" target='_blank'>this is an example of a web page</a>
</p>
</body>
</html>
One thing to note perhaps is the use of target='_blank' in the hyperlink. This opens the link in a new window/tab so that the original page remains open ~ you do not want, afterall, to send away visitors! But, as already noted - use the scheme when adding remote links else they will be treated as relative to current site.
<img src='//example.com/images/img1.jpg' />
<script src='//example.com/script.js'></script> ...etc
For certain types of content (img,css,javascript etc) you may omit the scheme but instead use a double slash // - this forces the content to load using the same protocol as the current page.
Related
I just recently started learning semantic HTML tags and I'm a bit confused about when to use section or article when I want to make an overview of the whole website or just a list of contents.
For example, how would you structure something like this with semantic tags. Each item of this list would have their own page and a link in the main nav bar. And each of these pages would contain couple of blog posts inside.
<main>
<section>
<h2>Contents of this site:</h2>
<p>Here is a quick summary of what you can see on this website.</p>
<ul>
<li>
<h3>About me</h3>
<p>Learn more about the author of this site.</p>
</li>
<li>
<h3>Favorite music</h3>
<p>Here I will tell you about some of my favorite musicians.</p>
</li>
<li>
<h3>Favorite games</h3>
<p>Here I will tell you about some of my favorite games.</p>
</li>
<li>
<h3>Favorite books</h3>
<p>Here I will tell you about some of my favorite books.</p>
</li>
<li>
<h3>Favorite movies</h3>
<p>Here I will tell you about some of my favorite movies.</p>
</li>
<li>
<h3>Favorite recipes</h3>
<p>Here I will tell you about some of my favorite recipes.</p>
</li>
</ul>
</section>
</main>
Would this be the best practice or should I wrap each <li> inside of an article? Or should I just leave out the unordered list and just use articles only instead?
Thank you in advance for help explaining this.
If you want to make use of semantic <article> tag in this code, you can wrap your <h3> & <p> tag with <article> tag instead of wrapping <li> with <article> tag, and it won't work as you expected.
That all looks pretty good to me.
<section> is best used to divide up a page when you have different topics or different things to highlight. Say for example you have a Home page with a general summary at the top and a contact form lower down then a call to action lower down. You might want to use three sections for that. But, for semantics... sections are generic and there may be a tag which suits better and is more specific for the info you're displaying (see the link below).
<article> would be really good to use as a wrapper around the actual text for each blog post. Think of this one as highlighting the individually composed or unique info. News articles, reviews etc.
Info : https://css-tricks.com/how-to-section-your-html/
My link doesn't work in HTML and I don't know why.
<div class="banner-text">
<ul>
<li><h3>HOME</h3></li>
</li><h3>ABOUT US</h3></li>
</li><h3>CONTACT</h3></li>
</li><h3>STUDENT's CORNER</h3></li>
</ul>
<h1 class="big">CHAWLA CLASSES</h1>
</div>
Use a validator.
Only <li> elements may be children of <ul> elements.
Put the links in the list items, not the other way around.
Asides:
Level 3 heading elements should be used for headings. If the entirely content of a list item is a heading, you are using the wrong markup. Apply CSS if you want to format the list items.
Screen readers will tend to spell out words written in ALL CAPS letter-by-letter. If you want something to be visually rendered in capital letters: Use the CSS text-transform property.
You should change it like this
<ul>
<li> Home </li>
<li> About Us </li>
<li> Contact </li>
<li> Student's Corner </li>
</ul>
UPDATE: Well, I check again but it works. There is the screenshots
1
2
Put the anchor tag inside the <li> tag. If it doesn't work, go-to developer console to trace it .
May be someone has already faced with such strange issue. I would appreciate if you could give me any usefull advices.
SPOILER: working html fiddle is located the end of question.
TASK:
I'm developing just another WYSIWYG editor based on <div contenteditable>. One of main feature for user will be working with nested lists.
PREPARE
I'm in editor, working with list which was received from server and put to <div> in innerHTML:
HTML:
<div contenteditable="true">
<ul>
<li>
One
<ul>
<li>
Two
</li>
</ul>
</li>
</ul>
</div>
Browser:
One
Two
In real life, innerHTML, received from server, will be inline, of course:
<div contenteditable="true"><ul><li>One<ul><li>Two</li></ul></li></ul></div>
Assuming, that I need to delete letter e in word One. I put caret after the word and press Backspace as usual.
PROBLEM IN IE Mobile
In Chrome, Safari, desktop IE11 everything will be OK - letter e will be deleted, and caret remain in the right position. But in Windows Phone IE, caret will jump to the next position in list - before word Two.
Sorry for huge explanation, I put this HTML on google hosting, so you can try with your own Windows Phone and try delete letter e with backspace:
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
</head>
<body>
CORRECT backspace behaviour:
<div contenteditable="true">
<ul>
<li>
One
<ul>
<li>
Two
</li>
</ul>
</li>
</ul>
</div>
INCORRECT backspace behaviour:
<div contenteditable="true">
<ul><li>One<ul><li>Two</li></ul></li></ul>
</div>
</body>
</html>
http://www.googledrive.com/host/0Bw1Lu-P82yZ_TzNFa1VVTVpjbms
P.S.: yes, i noticed that despite the "equality" of these two div's, IE is adding one space after each word in the first variant. May be it can be a workaround if server will add   in each line.
UPDATE: this question is related to Windows Phone IE only.
Just as quick workaround - to add <br> in the end of each text element that belongs to <li> containing nested <ul>.
<ul><li>One<br><ul><li>Two<br></li></ul></li></ul>
It seems like with html like
<ul id="projectsList" class="list-style-1">
<li>
<a href="/projects/view/1">
<p class="heading">New Project 1</p>
<p class="desc">by <strong>jiewmeng</strong></p>
<ul class="meta">
<li>Your progress <strong>0%</strong></li>
<li>Project's Progress <strong>0%</strong></li>
<li>Your tasks due today <strong>0</strong></li>
</ul>
</a>
</li>
</ul>
firefox adds markup to make it
<ul class="list-style-1" id="projectsList">
<li>
<p class="heading">New Project 1</p>
<p class="desc">by <strong>jiewmeng</strong></p>
<ul class="meta">
<li>Your progress <strong>0%</strong></li>
<li>Project's Progress <strong>0%</strong></li>
<li>Your tasks due today <strong>0</strong></li>
</ul>
</li>
</ul>
I narrowed the problem to the meta list items if I comment out the meta list, it works http://jsfiddle.net/MSegC/2/
I want to use the <a> as a block level element as I want the user to be able to click the whole box to enter the link
A is not a block level element in html (at least in html 4) so the short story is you can't use it like this :). That's why FF breaks' it for you.
http://htmlhelp.com/reference/html40/block.html
You should do what you want with an onclick event on the containing block.
Another option seems to be to force the doctype of the page to be html5 since in html5 it is possible for a to be a block level element.
http://davidwalsh.name/html5-elements-links
As previously mentioned, <a> is not a block-level element, but you can make it into one by setting the display property to either block or inline-block.
display:block; should make it act like any other block-level element.
display:inline-block; is a half-way house between making it a block-level and an inline element. If display:block; makes your page layout go nuts, then use inline-block instead.
Ok the topic I asked here is about "anchor" is that correct?
Ok this actually works now
**Development** this is on the First Site
And then where the Development is: (2nd site)
<a name="#tips1">**Developer**</a>
Did I miss something here?
Ok this is this first site:
http://i197.photobucket.com/albums/aa253/tintingerri/Test/test-4.png
Now if you can see, if you click on the "Development" it will go to the 2nd site. And in this 2nd site, this is where I listed the "Development" and "Consulting" in one page.
Now I would like that if the user click on "Consulting" it would go directly to the "Consulting" text and not to "Development" text first because they are written in one page.
So is this anchor?
I'm not sure I understand what you mean.
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
<hr />
<p id="apple">This is the Apple section.</p>
<hr />
<p id="banana">This is the Banana section.</p>
<hr />
<p id="grapes">This is the Grapes section.</p>
When you click on a link, it will take you to the section it's linked with via element IDs. The sections can be behind the <hr />.
Linking to another page is similar:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
Is this what you meant?
[EDIT]
After clearing the issue in the comments, the solution indeed turns out to be anchors. Page one, say, index.html, will have this code:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
While page two, say, fruit.html, will have this code:
<p id="apple">This is the Apple section.</p>
<hr />
<p id="banana">This is the Banana section.</p>
<hr />
<p id="grapes">This is the Grapes section.</p>
You don't have to use <p> tags, of course. You'll probably want to use <div> containers instead:
<div id="apple">
<p>My apple stuff</p>
</div>
<hr />
etc.
I'm really not sure what you're asking here, but I get the impression it's along the lines of:
If someone clicks the links, how do I show information related to that link on the same page?
Which is relatively easy:
html:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
<div id="apple" class="panel">
<p>Apple Stuff</p>
</div>
<div id="banana" class="panel">
<p>Banana Stuff</p>
</div>
<div id="grapes" class="panel">
<p>Grapes Stuff</p>
</div>
css:
.panel {
display: none;
}
.panel:target {
display: block;
}
JS Fiddle demo of the above.
I think you are trying to link to another place on your page?
For absolute, the following syntax is used: Link text.
With relative addressing, it is only necessary to use the name of the web page file you are linking to as the value in the href attribute provided that the page containing the link resides in the same folder as the page acting as the link's target.
Maybe still this doesnt answer your question?
For the same page, A named anchor inside an HTML document:
<a name="useful on same page">Useful Paragraph</a>
Create a link to the "Useful Paragraph" inside the same document:
Useful Paragraph
If I still havent answered the question, please provide more info
With an ul, very simple:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>