I have no clue why my page doesnt display the point i want to be in lists as lists. It just gives out all the points between the li tags in the same line.
also can i link the same css files to all my text files?
<!DOCTYPE html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>eligiblitypage</title>
</head>
<body>
<h1>Are You Eligible?</h1>
<p>It is great that you took the first step. Yes thinking about
getting transferred. But before proceeding, checks out if
you are eligible for the college you are applying to.</p>
<div class="first">
<div class="info">
<ol>
<li>The first step would be to:
<ol>
<li>Make a list of colleges which you find to be a good match for you (yes Ivies also take transfers!)</li>
<li>If you dont know much about colleges in the US, exploring the CollegeBoard website would be
the first step for you College Search</li>
<li>Filter according to your needs in the website and then finalize some colleges for which you are
eligible.</li>
</ol></li>
<li>Next Steps!
<ol><li>Now that you have got a list of the colleges, visit the college websites and explore the various
oppurtunities you may have in that college.</li>
<li>Also look throught the transfer requirements to see if the college has some special requirements
for transfer students</li>
<li>Attending college in the US may get costly. Try to look at what the cost of attending college would be. If you are an intenrational student
,check out the financial aid page and also the scholarships offered if any.</li>
</ol></li>
<li>Final Steps
<ol>
<li>Dont forget to check on the website if the colleges in your list offer your desired major</li>
<li>Also check the college coursework and see whether you can handle it or not</li>
<li>Now that you know about your eligibility, you can move on to the <a href="#">application process imformation<a></li>
</ol></li>
</ol>
</div>
</div>
</body>
</html>
Also can i add div tags in individual li tags?
Close the last <a> tag, and everything should be fixed.
Change
<li>Now that you know about your eligibility, you can move on to the <a href="#">application process imformation<a></li>
to
<li>Now that you know about your eligibility, you can move on to the application process imformation</li>
Edit:
Here's the complete working body with the one change above, as well as reformatted:
<body>
<h1>Are You Eligible?</h1>
<p>It is great that you took the first step. Yes thinking about
getting transferred. But before proceeding, checks out if
you are eligible for the college you are applying to.
</p>
<div class="first">
<div class="info">
<ol>
<li>
The first step would be to:
<ol>
<li>Make a list of colleges which you find to be a good match for you (yes Ivies also take transfers!)</li>
<li>If you dont know much about colleges in the US, exploring the CollegeBoard website would be
the first step for you College Search
</li>
<li>Filter according to your needs in the website and then finalize some colleges for which you are
eligible.
</li>
</ol>
</li>
<li>
Next Steps!
<ol>
<li>Now that you have got a list of the colleges, visit the college websites and explore the various
oppurtunities you may have in that college.
</li>
<li>Also look throught the transfer requirements to see if the college has some special requirements
for transfer students
</li>
<li>Attending college in the US may get costly. Try to look at what the cost of attending college would be. If you are an intenrational student
,check out the financial aid page and also the scholarships offered if any.
</li>
</ol>
</li>
<li>
Final Steps
<ol>
<li>Dont forget to check on the website if the colleges in your list offer your desired major</li>
<li>Also check the college coursework and see whether you can handle it or not</li>
<li>Now that you know about your eligibility, you can move on to the application process imformation</li>
</ol>
</li>
</ol>
</div>
</div>
</body>
Related
i been doing a codecadmey course on html one of the task were to make the code so it follows the rules of the The World Wide Web Consortium by 2 space indents.I asked a few people where to put the indentations but every time i try i still cant proceed to the next task. here my code below can anyone help me to put the indentations.!!!
<!DOCTYPE html>
<html>
<head>
<title>Animals Around the World</title>
</head>
<body>
<h1> The Brown Bear </h1>
<p> The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America. Its conservation status is currently "Least Concern." There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear. </p>
Learn more
<p> The following are subspecies of bears: </p>
<ul>
<li> Arctos </li>
<li> Collarus </li>
<li> Horribilis </li>
<li> Nelsoni (extinct) </li>
</ul>
<p> The following countries have the largest populations of brown bears: </p>
<ol>
<li> Russia </li>
<li> United States </li>
<li> Canada </li>
</ol>
<a href="https://en.wikipedia.org/wiki/Brown_bear"target="_blank">
<img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg" alt="bear photo"/></a>
</body>
</html>
Check your spacing. For instance on the link below you should have a space between the href and the target.
<a href="https://en.wikipedia.org/wiki/Brown_bear"target="_blank">
Should be
<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">
<!DOCTYPE html>
<html>
<head>
<title>Animals Around the World</title>
</head>
<body>
<h1> The Brown Bear </h1>
<p> The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America. Its conservation status is currently "Least Concern." There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.
</p>
Learn more
<p> The following are subspecies of bears: </p>
<ul>
<li> Arctos </li>
<li> Collarus </li>
<li> Horribilis </li>
<li> Nelsoni (extinct) </li>
</ul>
<p> The following countries have the largest populations of brown bears: </p>
<ol>
<li> Russia </li>
<li> United States </li>
<li> Canada </li>
</ol>
<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">
<img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg" alt="bear photo" /></a>
</body>
</html>
The speediest solution is to use the HTML Tidy tool which you may find available online so that you may download and install it. But, there are also websites that make that tool freely available for immediate use, such as codepen.io. But, that is actually more effort than you need to expend, given that a tidy tool exists at StackOverflow as part of the functionality that the OP uses to display the HTML code in question. If the OP were to click the option to edit the posed question, a link is provided ("edit the above snippet") that allows one to edit the code. If you click that link, you will note on the left side a tidy tool that works on HTML, CSS or JavaScript. So, you may choose to spend your time efficiently by utilizing this tool to have the desired indented code or else visually scan each line and character of the code to figure out for yourself where the spacing needs adjustment.
I'm creating a website in WordPress, it's going well, but whenever I try to add pictures to the page of the site, the text won't wrap around them. The pages are supposed to be created when you're inside of your WP account, so there is minimal coding involved, and each page has it's own coding and formatting as far as html is concerned. I would be willing to change the CSS to fix this problem, but I wouldn't know where to start. Here is the code for the About Us page:
Cougar Electric Car Company is made up of students at
Kennedy High School in Cedar Rapids, Iowa. Students work in teams to design and construct safe, energy-efficient electric one-person vehicles that they showcase during a series of rallies across the
Midwest. This is hands-on education. Team members apply what they’ve learned in math science, and or vocational education – and more.
<img style="float: right;" src="http://leifsegen.com/sandbox/livia_t/electric-car/wordpress/wp-content/uploads/2016/02/IMG_5139-300x225.jpg" alt="IMG_5139" width="300" height="225" />
<h6>The program is designed to challenge students to:</h6>
<ul>
<li>Apply classroom lessons to build a one-person light electric vehicle</li>
<li>Design and engineer the vehicle to roll safely and efficiently</li>
<li>Use problem-solving skills</li>
<li>Promote efforts in the community to gain support</li>
<li>Compete against other schools to see whose vehicle performs best</li>
<li>Document the design/build/compete process</li>
</ul>
<h6><strong>Since 1997</strong></h6>
The program was launched by two students and Kennedy teacher Barry Wilson in 1997. Since then, the program has impacted hundreds of students and sparked interest in manufacturing, engineering, automotive, alternative energy, and many more career paths.
Here is the link to my About Us page.
From your linked page, it looks like your img tag is within a distinct paragraph tag underneath another paragraph tag. Since paragraph tags are block elements, they stack instead of allowing inline flow.
to resolve this, you want to go to the edit post/page area, and place the media at the start of the paragraph you want wrapping around it (or, however many lines down you want to start the wrapping). Click the image, then select the box that looks like a box w lines wrapping around it. See my screenshot for an example
You can accomplish the same thing in text mode instead of visual editor mode by placing the image tag within the same paragraph tag that the paragraph is in, then giving it a float:right / left property
Move the image inside the <ul> that will solve your issue. Already tested and its working
<ul>
<li style="list-style: none;"><img style="float: right;" src="http://leifsegen.com/sandbox/livia_t/electric-car/wordpress/wp-content/uploads/2016/02/IMG_5139-300x225.jpg" alt="IMG_5139" width="300" height="225"></li><li>Apply classroom lessons to build a one-person light electric vehicle</li>
<li>Design and engineer the vehicle to roll safely and efficiently</li>
<li>Use problem-solving skills</li>
<li>Promote efforts in the community to gain support</li>
<li>Compete against other schools to see whose vehicle performs best</li>
<li>Document the design/build/compete process</li>
</ul>
I'm trying to do nested, ordered lists using ol types and though the code looks right in the Wordpress preview, it doesn't show correctly when I preview in Firefox and IE, the lists all show as numbered lists instead of the types I specified in the code. My code is below. Can someone help me find what's wrong?
Thanks in advance for any help!
Kelly
Teaching your kids about money isn't always child's play. But helping them make smart choices early will pay off later.
<span style="text-decoration: underline;">Baby Steps</span>
<h4>Even the cartoon set can learn the value of a dollar. Some simple ideas:</h4>
<ol class="alt1">
<li>Show your toddler the various coins in your pocket or change purse and see if the clever tyke knows what each one can buy.
<ol type="a">
<li>Gum machines or mechanical rides still take coins. Or try old-fashioned "penny candy" shops, even if that bubble gum goes for a dime now.</li>
<li>How many coins are necessary to buy a popsicle or frozen yogurt at the ice cream truck?</li>
<li>Field trip: checking the prices at the grocery store can be instructive for kids —and their parents, too!</li>
</ol>
<ol class="alt2">
<ol type="i">
<li>Where does money come from (besides the ATM machine)? Discuss getting paid for work and how your salary lets you buy things for the family.</li>
<li>Lemonade stands still do a thriving business for first-time entrepreneurs.</li>
<li>Old toys can be contributed to Mom’s and Dad's yard sale to score a profit.</li>
<li>Discuss the best way to invest the proceeds with your tiny mogul. Hint: don't blow it all on candy or games.</li>
</ol>
</ol>
Older kids can understand the difference between necessary and optional purchases. Milk or gummi bears?
<h2>Here's Your Allowance</h2>
<h4>Yep, it's still a great teaching tool after all these years. Some ways to get with the program:</h4>
<ol class="alt1">
<li>Doling out the cash on a weekly basis makes sense. Even older kids may find it tough to budget a month in advance.</li>
<li>Decide whether there will be strings tied to the stipend. Will Junior have to complete household chores before you fork over the cash?</li>
</ol>
<ol class="alt1">
<ol type="a">
<li>Some families think helping around the house should be expected and unrelated to the weekly payout.</li>
<li>Other parents think it's a good way to introduce the idea of working for money and getting paid for a job well done.</li>
</ol>
</ol>
<ol>
<li value="3">In coming up with a dollar amount, savvy parents will not fall for reports of what the other parents are shelling out. Multiplying your own allowance in the distant past by the rate of inflation may be a good starting point.</li>
</ol>
</li>
</ol>
To nest one list inside another, you have to place it inside a <li> element. You can't put it directly inside an <ol> element.
In other words, replace this:
<ol>
<ol>
...
</ol>
</ol>
with this:
<ol>
<li>
<ol>
...
</ol>
</li>
</ol>
I tested both a non wordpress html page and wordpress entry. My guess is wordpess is stripping your type tag so try using CSS. Give each < li > a class and for your css use list-style-type to declare the list-item marker type.
ie:
ol.lower-alpha {list-style-type:lower-alpha}
li.lower-latin {list-style-type:lower-latin}
I'm the webmaster for smctheatre.com. We're a community theatre that puts on a handful of plays each year. I'm adding to my toolbox with learning structured data. Microformat, microdata, or RDFa, I don't have any strong preference for one over another. I do like the syntax of RDFa Lite and microfomat over microdata and full-blown RDFa.
The only thing I haven't been able to get an answer to is how to mark up an event that occurs on multiple dates, and sometimes at different times.
Here's a trimmed down snippet from the site:
<article>
<header>
<h1>Play Name</h1>
<div class="addthis_toolbox">...</div>
</header>
<aside>
<h2>Dates</h2>
<ul>
<li>May</li>
<li>Fridays 17 & 24</li>
<li>Saturdays 18 & 25</li>
<li>Sundays 19 & 26</li>
<li>Monday 27</li>
<li>All shows start at 7:30 PM</li>
</ul>
<h2>Tickets</h2>
<ul>
<li>Adult $8.00</li>
<li>Child (5-17) $5.00</li>
</ul>
<h2>Directed By</h2>
<ul>
<li>Director Name</li>
</ul>
</aside>
<div>
<p>Summary of a theatre play....</p>
</div>
</article>
Duration of plays are typically two hours, but given that these are live performances, there's no hard and fast ending time.
How do I mark up the content to indicate the dates and times?
Seriously doubt there's an example of exactly what you want, but microformats are flexible and I think I've found enough to get you started:
<div class="vevent">
<a class="url" href="http://conferences.oreillynet.com/pub/w/40/program.html">
http://conferences.oreillynet.com/pub/w/40/program.html
</a>
<span class="summary">Web 2.0 Conference</span>:
<abbr class="dtstart" title="2005-10-05">October 5</abbr>-
<abbr class="dtend" title="2005-10-07">7</abbr>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>
The example below uses multiple dates at the same venue; swap out the div for your article and looks like you're in business. easily make your header the summary, and put the description class on your p for summary...even though that sounds backwards, it's what you want.
How much further you want to take it is really up to you. I see where you could work start times, possibly a url....and also more microformats, to get even more goodness out of them. You should check out the wiki, it's full of great info, and examples from which you can and should pilfer.
http://microformats.org/wiki/hcalendar
I would like to put a table of contents at the top of an internal email newsletter that will allow readers to 'jump' down to the part of the newsletter that interests them. Something like:
<ul>
<li>Funding Opportunities</li>
<li>Professional Development</li>
<li>Best Practices</li>
</ul>
Then 'further down' in the email newsletter have:
<h2><a id="FUNDING">Funding</a></h2>
<!--- news items about funding -->
<h2><a id="DEVELOPMENT">Professional Development</a></h2>
<!--- news items about professional development -->
<h2><a id="BEST">Best Practices</a></h2>
<!--- news items about Best Practices -->
This works fine in browser based HTML, but I have not had success getting it to work in various email clients (gmail, groupwise, outlook). I have however, received emails that appear to use a technique like above and I am able to 'scroll' the email. I understand that support in various clients will vary and that this is not necessarily a 'good' practice but this is an internal system and almost all recipients will be using GroupWise.
Any experienced insight into the specific additional markup that is needed (e.g. what would the base ref be?) would be greatly appreciated.
Try adding the 'name' attribute to the anchor as well as the 'id'.
<a id="FUNDING" name="FUNDING">
I found this post when trying to accomplish the same thing, and I followed instructions here to get it to work: http://blog.mailermailer.com/tips-resources/anchor-tags-html-emails
This is the code I ended up with in the first successful test:
<html>
<a name="BACKTOTOP">Index</a>
<ul>
<li>Compliance Courses</li>
<li>Dealer Training</li>
<li>Functional Training Courses</li>
<br>
<h1>
<a name="COMPLIANCE">Compliance</a>
</h1>
<br>
This will be the message for Compliance courses.
<br>
Return to top index
<br>
<h1>
<a name="DEALERTRAINING">Dealer Training</a>
</h1>
<br>
This will be the message for Dealer Training.
<br>
Return to top index
<br>
<h1>
<a name="FUNCTIONALAREA">Functional Training Courses</a>
</h1>
<br>
This will be the message for courses by Functional Area.
<br>
Return to top index
</html>