What steps should I take to create a stylish HTML profile with well-organized CSS?

Looking for a way to display photos, biographies, personal details, and more on a webpage? We've got you covered! You can customize the layout using semantic HTML and CSS styles. Build your design online at http://jsfiddle.net/ and thank us later!

<!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>Your Yard Sales onproducts.line</title>
<link rel="stylesheet" href="" type="text/css" media="screen" />

</head>
<style type="text/css" >
#space {

    margin-bottom:1.2em;

       }
ul {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; }
 li {
    float: left; }
 li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc; }
     </style>
<body> 
<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Members</a></li>

<li><a href="#">Rollers</a></li>

<li><a href="#">Info</a></li>
</ul>
 <br/>
  <br/>
   <br/>
    <br/>
<div id="space">
<a href="#">Roberto Kirt</a>



</div>
<!--<ul><li><a href="#">'.$name2+'</a></li>
<li><a href="#">'.$name2+'</a></li>
<li><a href="#">'.$name2+'</a></li></ul>-->

<table width="1768" cellpadding="0" cellspacing="0" border="0.5">
  <tr>
    <td width="493" height="149"><img style="border:#666 1px solid;" src="images/profileimages/8.jpg" alt="Angel Pilier                   "align="left" width="100" height="130" border="1" /></td>
    <td width="1275"><table width="880" border="0.5" cellpadding="0" cellspacing="0">
      <tr>
       <td width="145" height="31"> </td><td></td>
      </tr>

      <tr>
        <td height="44" align="right">Born:</td><td width="735">1975-11-23</td>

      </tr>
      <tr align="right">
        <td height="38"></td>
       >
      </tr>
      <tr>
        <td height="36" align="right">Died:</td><td width="735">0000-00-00</td>

      </tr>
    </table></td>
  </tr>
  <tr><td height="31" colspan="2">&nbsp;</td></tr>
  <tr>
    <td height="31"><a href="#">Photos</a></td>
    <td rowspan="7"><table width="885" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="145" height="31" align="right"> Nationality:</td><td width="740"></td>

  </tr>
  <tr align="right">
    <td height="25">&nbsp</td>

  </tr>
  <tr>
    <td height="24" align="right">Spouse:</td><td width="740"></td>
  </tr>
  <tr align="right">
    <td height="28">&nbsp</td>

  </tr>
  <tr>
    <td height="27" align="right">Ocupation:</td><td width="740">Pianist</td>

  </tr>
  <tr align="right">
    <td height="27">&nbsp</td>

  </tr>
   <td height="27" align="right">Childhood:</td><td width="740"></td>

  </tr>
     <tr align="right"><td height="27">&nbsp</td>

  </tr>
     <td height="27" align="right">Tracks:</td><td width="740"></td>

  </tr>
  <tr align="right">
    <td height="119">&nbsp</td>

  </tr>
</table>
</td>
  </tr>
  <tr>
    <td height="25">  <a href="#">Biography</a></td>

  </tr>
  <tr>
    <td height="25"> <a href="#">Life</a></td>

  </tr>
  <tr>
    <td height="26"><a href="#">Tell an Anecdote</a></td>

  </tr>
  <tr>


  </tr>
  <tr>


  </tr>
  <tr>
    <td><iframe width="700" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Rochester,+New York,+United States&amp;sspn=0.119541,0.110378&amp;ie=UTF8&amp;hq=&amp;hnear=Rochester,+New York,+United States&amp;z=14&amp;output=embed"></iframe></td>
   <!--<img src="images/foto.jpg" alt="nada" width="422" height="165" />-->
  </tr>
</table>

</body>
</html>
htmlcss

Answer №1

Dear @fello, there are several considerations to keep in mind for your layout:

1) Utilize external stylesheets whenever possible to avoid making the HTML page heavy and needing to rewrite CSS for each new page.

2) Opt for a div-based structure over tables for increased flexibility. Refer to this for further insight.

3) Avoid excessive use of <br/> tags; instead, utilize margin and padding for spacing.

4) Every browser has default properties applied, so consider using a reset sheet.

5) For semantic markup references, explore the following links:

a)

b) http://css-tricks.com/snippets/html/html5-page-structure/

c)

Answer №2

In my opinion, incorporating a CSS framework such as Twitter Bootstrap can help you create a fantastic and mobile-friendly layout quickly :)

Answer №3

Consider using hcard for improved microformat integration. Learn more about hcard and other microformats here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Click event not triggering to update image

I'm currently working on a Codepen project where I want to use JavaScript to change the image of an element with the id "chrome". However, my code doesn't seem to be working as expected. Can someone help me troubleshoot and fix this issue? Your a ...

javascripthtmlcss

Clicking elements reveal but page height remains unchanged?

Clicking on a label within #row-product_id_page-0-0 triggers the display of #row- elements as shown in the code snippet below: $('#row-product_id_page-0-0 label').click(function() { var str = $(this).find('.am-product-title').text ...

javascriptjqueryhtmlcss

Guidelines for Naming Data Attribute Values in JavaScript

When it comes to the Data Attribute Value, should one use hyphens or camelCase as a convention? Hyphen Example: <input type="text" name="some_input" data-target="to-grab-input-via-javascript"> Camel Case Example <input type="text" name="some_ ...

javascriptjqueryhtml

Why is AJAX failing to execute PHP file from JavaScript?

The Issue: Hello, I have confirmed that my PHP file is functioning properly. However, the AJAX code connected to my JavaScript function seems to be malfunctioning. Even though the function is triggered, nothing happens as expected. The Script: Check o ...

javascriptphpjqueryajaxhtml

What is the best way to incorporate a background image in a Bootstrap tooltip?

I'm having trouble displaying an element with a background-image property within a Bootstrap tooltip. The image is not showing up as expected. <div class="big-panel"> <a href="#" data-bs-toggle="tooltip" data ...

javascripthtmlcsstooltipbackground-image

What are the most effective strategies for creating cross-platform components using Vue.js 2.0?

In my current project, I am looking to create a universal component library using Vue.js 2.0 that can be seamlessly integrated across various platforms. The focus of this query lies in establishing the most effective styling practices for components. Typi ...

cssangularjsreactjsresponsive-designvue.js

Preventing a Click Event on Child Element from Triggering the Parent's Click Event in jQuery

Can you help me figure out how to prevent a button from executing the onclick function of its parent div in this example? <div onclick="$('#extra-info').slideToggle();" class="card card-body item"> <div class="ro ...

javascripthtmljqueryonclick

Send an AJAX request to redirect to a different page on a PHP server

After collecting data from JavaScript, my page transfers it to PHP and then MySQL. The issue arises when I want the page to redirect to different pages based on the database content. I attempted to use the header function, but it only displayed the entire ...

javascriptphphtmlajax

Expanding Issue with Bootstrap Navigation

Hello! I am experiencing an issue with my navbar. The menu collapses, but it does not expand. I have used an example from Bootstrap and made some tweaks, but for some reason, it still doesn't expand properly. Below is the code that I have been workin ...

htmlcsstwitter-bootstrap

Seamlessly adaptive HTML5 video playback

Has anyone figured out how to make an HTML5 video in an absolutely positioned <video> element resize to fit the window width and height without ever getting cropped? Many solutions I've come across rely on using the <iframe> tag, which is ...

javascriptjqueryhtmlcsshtml5-video

Control the switch for CSS selectors

Consider the following scenario where CSS rules are defined: <style> table {background:red;} div {background:green;} </style> In addition, there is HTML code that calls a JavaScript function: <table onclick="tu ...

javascripthtmlcss

Ensuring uniform height of columns in Bootstrap

I want all columns following the first row with col-md-6 to have equal height, regardless of dynamic content (go to full page). <html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="viewport" ...

htmlcsstwitter-bootstrapbootstrap-5

How to optimize PHP scripts by using a single MySQL query instead of loops?

Below are the tables I am working with... Locations __________________________________________________________ ID Location Region Country 1 Newmarket Ontario Canada 2 Barrie ...

phphtmlmysqlsql

Running a Node.js child process upon clicking an HTML button

I need to create a basic webpage where clicking a button will open the command prompt. This is my goal. Below are the HTML and Node.js code snippets. test.html <html> <head> </head> <body> <p>guru</p> <form a ...

htmlnode.jsreactjs

Difficulty with selecting the nth-child element within an Ember application

In my current project using Ember, I am faced with the challenge of targeting nth-child elements with CSS due to the presence of Ember script tags. Is there a consistent method to achieve this in an Ember application? Instead of the conventional approach: ...

cssember.jscss-selectors

The Page Transcends the Boundaries of the HTML Tag

This particular issue sets itself apart from the common overflow problems that are often faced by people. Interestingly, I have only encountered this problem while using Chrome (Version 41.0.2272.101 64-bit). IE 9+ and Firefox, on the other hand, seem to b ...

htmlcssoverflow

What is the process for utilizing html4 or previous versions in eclipse mars?

I recently started using Eclipse and my version of the software automatically supports html5. However, when I try to use outdated tags that are not compatible with html5, I encounter errors. Can someone please provide guidance on how I can switch to usin ...

eclipsehtmlweb

Centered image

I am working on a website and struggling to center the image on all screen sizes. I attempted the following code:- <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" lang ...

htmlcss

I noticed a random gap between the elements with no discernible explanation

<div id="colorscheme"> </div> <div id="content"> <div id="display_saved"> TEXT TEXT TEXT </div> Here is the HTML structure related to a particular document issue. CSS: #colorscheme{ width:25%; display:inline-blo ...

htmlcss

Is there a way to exclude the Unicode character from the first menu item while still utilizing it in the other items on my menu?

I have been working on customizing my menu by using the unicode character \25C6 to represent a black solid diamond as a spacer between labels. After searching for solutions on Stack Overflow, I attempted to implement the suggested method using the bef ...

csswordpressmenuicons