|
HTML - Basic Coding
I am a newbie to this html thing but I have a task that is a little complicated that I need to do often. I want to be able to work with a design like in the attached. Can someone send me a sample of coding that will make a similar to this? I do not want to use tables because I was told that tables are not a very good way to lay out something with pictures and text.
The coding does not have to be complete - just the bare minimum to do the job. I do not expect to be able to make it a file and make it work - I just want to study it. Similar TutorialsI'm doing some homework for my basic html class and i put the code in the w3 validate and it keep's putting errors on my images what am i doing wrong? Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tyler East, ITSE 1411 Lab Project 1, Tutorial 1 Case 4, Due 02/09/2011</title> <!-- Body System's Home Gym Equipment Tyler East 2/4/2011 --> </head> <body> <img src="logo.jpg" alt="Body Systems" /> <hr/> <h2>Body Systems LSM400 Linear Smith Machine</h2> <IMG src="smith.jpg" ALT="LSM4000" /> <h2>Overview</h2> <p>Linear Smith Machines are the ultimate in weight machines and the LSM400 leads the field. Designed for both serious fitness users and beginners, the LSM400's vertical design provides all of the safety and control associated with Smith Machines, while still allowing for the effective use of gravity for effective resistance. You don't even need a workout partner. Lock points can be set to prevent the bar from movement outside of your body's natural range of motion.</p> <p>You can tailor the LSM400 to meet you specific workout needs. Start with the basic package of the Smith Machine rack and, as your needs grow, add a lat/row, pec dec, plate tree, dip, and accessory organizer. Accessories are easy to insert and remove, allowing you to continue your workout without delay. The LSM400 works with all standard Olympic weight plates</p> <p>The LSM400 is compact with all components place one side of the unit for easy access. This makes the LSM400 perfect for people who want a quality home gym, but do not have a lot of space. Place the LSM400 against a wall and you're ready to go!</p> <p><b>Features</b> Smooth Smith Action: The bar (rated at 800 lb. capacity) slides on Teflon bushings alongside solid steel guide rods. Smooth motion is key to successful workouts, as the target muscles are utilized to their full potential with each repetition.</p> <p><b>Proper Angle:</b> The bar travels along a 7 degree path from vertical. Studies have shown that this is the proper lifting angle to increase your comfort and prevent injury.</p> <p><b>Safety:</b> The LSM400 has 20 lock-out points for a safe, solid stop at any point in your workout routine.</p> <p><b>Rugged:</b> Constructed with heavy 12 gauge steel and 7 gauge reinforcing plate. This is a unit built to last.</p> <p><b>Warranty:</b> Every part of the LSM400 has a lifetime guarantee. We will replace or repair anything that goes wrong.</p> <b>Dimensions</b> <ul> <li>Width: 85"</li> <li>Height: 82"</li> <li>Depth: 72"</li> </ul> <b>Optional Attachments</b> <ul> <li>Selectorized Lat/Row station (Part: MA831-4)</li> <li>Pec Dec station (Part: MA218-6)</li> <li>Dip station (Part: MA105-3)</li> <li>Plate tree (Part: MA488-0)</li> <li>Accessory organizer (MA212-1)</li> <li>Workout DVD (MA051-1)</li> <li>Workout poster (MA055-3)</li> </ul> <address> Body Systems 401 Commercial Drive Eaton, TX 87015 (800) 555-2811 </address> </body> </html> I got this code (below) from an html tutorial and added into mt index page and my css file. And all that shows on the web page is CONTENT GOES HERE. I guess I need a corner image named box-bg? Can you help me with one? And how do I add a light-grey, thin border around the box? Thanks. Code: In index page:
<div class="box">
<div class="topleft">
<div class="topright">
<div>
CONTENT GOES HERE
</div>
</div>
</div>
<div class="bottomleft">
<div class="bottomright">
</div>
</div>
</div>
and in CSS:
.box div.topleft {
display: block;
background: url("../images/box-bg.png") top left no-repeat white;
padding: 2.0em 0em 0em 2.0em;
}
.box div.topright {
display: block;
background: url("../images/box-bg.png") top right no-repeat white;
padding: 2.0em;
margin: -2.0em 0 0 2.0em;
}
.box div.bottomleft {
display: block;
height: 45px;
margin-top: -2.0em;
background: url("../images/box-bg.png") bottom left no-repeat white;
}
.box div.bottomright {
display: block;
background: url("../images/box-bg.png") bottom right no-repeat white;
height: 45px;
margin-left: 3.0em;
}
Hi, i have been asked to create a page for an existing website. I have created the page using one of the site pages html code, basically i just copied the html layout, and added my own pics/words, and saved it on my computer. What have to do now is get this page to the website administrator. What is the best way?. I tried to upload to a server without success. Can it be emailed?. All i need is for the website admin to view the page so hey can add it to the site. Sory to bother you with simple stuff, Thanks, Tom. hi there, i have a basic page layout written consisting of 3 tables. however, i have a queery. How would i go about putting a line break between the top table (the banner table) and the second table (links) and the same again between the second and third (content) tables. I've provided my code below. Thanks Stuart <body> <center> <table id="shell" title="Shell" height="250" width="100%" border="0" bgcolor="black" cellspacing="1" cellpadding="0"> <tr height="50"><td bgcolor="white"> <table title="banner" id="banner"> <tr><td>Banner goes here</td></tr> </table> </td></tr> <tr height="25"><td bgcolor="DFE6EF"> <table title="Navigation" id="navigation"> <tr><td>Links!</td> <td>Links!</td> <td>Links!</td></tr> </table> </td></tr> <tr><td bgcolor="white"> <table title="Content" id="content"> <tr><td>Content goes here</td></tr> </table> </td></tr></table> </body> </html> Hello i hav my own small website that i use for shortcuts for a webiste i use and have this in firefox using the "load this bookmark in the sidebar" option. So what i want is when i click the link in my sidebar that it opens in the tab i have opened and not in the sidebar if you get me. Any help would be welcomed. thanks hi. i have found a site that displays their images the way i want to http://www.ukhotelsupplies.co.uk/ i want 3 rows and 3 columns of pics with a text lable above it whats the best way of doing this please. a table would be easy but people say not to use them. thanks I need to create a very basic nav bar with some properties. Here are my requirements below: *I use six images in place for the link *I use six additional images for 'hover images'. So when the user hovers over one of the nav images a new one shows up *Each additional image is different. *I need it to work in ie6(hopeful), ie7, ie8 *I would like for it to be valid code as well. Now I'm busy doing css navs and I forget the 'old school' days of html nav bars. What would be good resources for such a navbar for me to review and create this? Any help would be greatly appreciated. Hi I'm not web guru (this will become obvious shortly), but I'm doing a website project for my school assistantship. For the most part, it's solid for my needs and the committee I'm working for. Here it is: http://people.umass.edu/luke/PEP/index.html But there are 2 problems: 1) the UMass Amherst Banner on the top spreads the width of the page when viewed in IE, and 2) the Menu moves up and down with the links in varying degrees depending on the browser. I can't fix them. I know people are busy and have lives and I wouldn't be posting if I hadn't tried everything in my faculties to solve these issues. If you have suggestions, it would save me embarrassment and a LOT of time. Thanks so much for reading! Hi im a very basic html programmer and am fairly new Im trying to make a forum just a simple one to start of but im not sure how to do a few things if someone can help me out that wud be greatly appreciated My form contains just 2 things First name : Last name: "Submit button" 1: can someone tell me how can i create these 2 text boxes with these title? 2: how do i store the input from the 2 text boxes to a file that only i can view? 3: and after pressing the submit button how can direct the ppl to another page (lets say my home page) 4: and how do i access the information/file where i had stored the input THANK U very much hi, i have just decided to make my own web site! Please could you tell me some bacis things like marquee effects etc. Many thanks , Hello people, OK so i'm new here and want to try to learn the basics of HTML/XHTML so what would you suggest would be the very first thing i should learn? Any help is greatly welcomed Brett. edit: Problem solved, how do I delete this thread? I was wondering if anybody knew if using frontpage or had the code for something like pretty much: I want to make a comments / message board type thing where people can leave comments sorta of like on the end of the new york times articles or such where people comment, however i want to make it so i can approve the comments before they show up. Hi I am trying to add some custom text below a frameset. Basically can anyone add just a simple header below the frameset in the following code> Code: <html> <frameset cols="25%,*,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html> The code comes from this page: http://www.w3schools.com/tags/tryit....tml_frame_cols and I've tried the usual ways of adding a body tag and added a h2 tag below it, but i can't get it to work - either i can get the h2 tag to appear or the frameset. Can anyone help? Thanks So, i am very new to writing html, just started learning. I have created a very basic page for practice(the code is below) using text edit on a macbook. The file is saved with the .html extension. The problem lies in when i try to load the page with a browser(i have tried both safari and firefox), i double click it and the browser opens the file, but it looks exactly like the source file. It shows all the tags and everything that is written in the source code. I have been trying to figure out what i have done wrong for hours now, have tried all the variations of 'doctype' tags and none fixed the problem, have also tried it without a 'doctype' tag and same thing happened. Can someone please look at the source below and give me any help possible? I am very new to this, so maybe it will make complete sense to someone out there. Thanks a lot in advance. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Title</title> </head> <body> <h1>Header</h1> <br> <p>Paragraph contents will go here.</p> </body> </html> I normally work in Flash which is much more intuitive for me. I am making and effort to design more in HTML. Here is the most basic of questions.. When doing designs in Photoshop or Illustrator, what is the best way to save slices. Gif or Jpeg. Are there tutorials or personal comment on the forum about the best practice for slicing sites. Thanks! I made a table out of a sliced image out of adobe illustrator. I left a big white space in illustrator where I want to make a seperate frame, and illustrator saved this out as an image file. I would like to take this segment of the table, and make it into a frame. Is there an easy way to make this portion of the table reference another .html file? Thanks in advance. I want to create a two column table that, in one of the rows, has a large picture in the second column. I wanted to "wrap" the picture in a <div> and give the div scroll bars so the user can scroll horizontally and vertically to see the entire picture, but still keep the width of the table as the same size as the width of the browser window. The div part seems to work fine. The large picture appears in the smaller div and the div has the scroll bars that I want. But, the table is still sized to contain the ENTIRE width of the photo, so the other rows in the table go off the edge of the browser window (because the image is wider than the browser window). Is there a way that I can limit the table width to only be the width of the browser, and have a large photo contained in a scrolling div, within one of the table rows. I will include some basic HTML code to demonstrate the problem. Just insert a path to some large image you might have, for testing, into the image tag's src property. (the image I am using is 1600x1200) Thanks, in advance, for any help you can provide. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test a Large Image in a Table</title> </head> <body> <table style="border-bottom-width:thin"> <tr style="width:300px;"> <td style="width:20%; background-color:gray"> Title #1 </td> <td style="width:80%; background-color:red""> Why does this row go past the edge of the page? </td> </tr> <tr style="width:300px;"> <td style="width:20%; background-color:gray"> Title #2 </td> <td style="width:80%"> <div style="overflow:auto; max-width:60em; min-width:15em;"> <img src="" alt="some large image" /> </div> </td> </tr> </table> </body> </html> Hi Guys on this page www.thepullmanlodge.co.uk/weddings.htm the top 3 pictures are meant to slideshow into each other. When I preview the site in frontpage it works, but now I've uploaded it online it won't work and just shows the three pictures in a block. Can anyone help me get this working as it should? Thanks alot John Hello! I was given some code by a very helpful person for my site (sailormoonthemovie.com/test2.html). I am a total beginner with HTML and usually just copy and paste into dreamweaver. Only now after bringing this new code into dreamweaver, it wont let me draw hotspots onto my main layout image (with the youtube, twitter and facebook squares) which I would like to turn into links. I'm pretty sure there is a really easy way of doing this but without it functioning in dreamweaver the way it did before, I'm totally lost. Thank you so much for any help or suggestions! |
|||||||