 First time marking up a HTML file, is this symmetric?, Please tell me how I can improve writing this before going into stylin |
  |
| corvox |
  Sep 18 2017, 10:33 AM
Post
#1
|
|
Group: Members Posts: 1 Joined: 18-September 17 Member No.: 26,500  |
CODE <!DOCTYPE html><html lang="en"> <head><meta charset="utf-8" > <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1" ><!-- tell mobile browsers we know what we're doing! --> <link rel="stylesheet" href="screen2.css" media="screen,projection,tv" ><!-- HTML 5 validation kvetches about projection,tv; **** that noise! --> <title>Pittsburgh Website Design</title> </head><!-- End of my header --> <body> <div id="top"> <h1>412MEDIA<span>DESIGN</span></h1> <ul> <li>Home</li> <li>About</li> <li>Services</li> <li>Case Studies</li> <li>Contact</li> <li>Blog</li> </ul> <h2>Need online marketing & media design?</h2> <p>We design, develop and market your website online,</p> <p>To conquer <strong>social media, and search results!</strong></p> </div><!-- end Top--> <div id="seoAudit"> <h1>Site at risk?</h1> <p>Check now!</p> <form action="seoformprocessor.html" method="get"> <fieldset> <legend>FREE SEO REPORT</legend> <p>Business Name <input type="text" name="bussinesName" /></p> <p>Website <input type="text" name="website" /></p> <p>Social Media <input type="text" name="socialMedia" /></p> <p>Phone <input type="text" name="phoneNumber" /></p> <p>Project Details <textarea rows="4" cols="50"></textarea></p> </fieldset> </form> <div class="buttonWrapper"> <a class="seoctaButton" href="#">FREE REPORT!</a> </div> </div><!-- end SEO Audit Call to action--> <div> <h1>Subscribe to our news letter!</h1> <div class="buttonWrapper"> <a class="subctaButton" href="#">Subscribe Today.</a> </div> </div><!-- end Subscribe call to action--> <div id="cities"> <ul> <li>Pittsburgh</li> <li>Greensburgh</li> <li>Fox Chapel</li> <li>Allentown</li> </ul> </div><!-- end Cities info--> <main> <div id="content"> <h2>It's Time to streamline1</h2> <p>Managing large projects and keeping everyone on the same page is tough, and hiring a foreign website design firm and online marketing agency can make it even worst!</p> <p>With our our website design and velopment team working side by side with our online marketing team, helps makes your online projects just flow.</p> <p>It's time for you to try our streamlined process with our free trail offfer! Set back, relax and let us do the hard work, we hear it's a more clam way of doing things!</p> <p>For nearly 30 years we have been mastering the web, our knowledge is pricessless so find out what you have been missing and see what streamlining your online marketing efforts can do for your business!</p> <div class="buttonWrapper"> <a class="freectaButton" href="#">FREE TRAIL!</a> </div><!-- Free trail button--> </div><!-- end Content--> </main> <div class="container"> <div class="row"> <div class="heading-title text-center"> <h2 class="text-uppercase">Our professionals </h2> <p class="p-top-30 half-txt">Meet our Design Teams, Developers and marketing teams and know your in good hands with us!</p> </div> <div class="col-md-4 col-sm-4"> <div class="team-member"> <div class="team-img"> <img src="https://image.freepik.com/free-photo/man-standing-with-a-black-t-shirt_1187-1045.jpg" alt="team member" class="img-responsive"><!-- place holder image--> </div> <div class="team-hover"> <div class="desk"> <h3>Hi There !</h3> <p>I love to introduce myself as a hardcore Web Designer.</p> </div> <div class="s-link"> <a href="#"><i class="facebook"></i></a> <a href="#"><i class="twitter"></i></a> <a href="#"><i class="google-plus"></i></a> </div> </div> </div> <div class="team-title"> <h5>Shane Brunson</h5> <span>founder & ceo</span> </div> </div> <div class="col-md-4 col-sm-4"> <div class="team-member"> <div class="team-img"> <img src="https://image.freepik.com/free-photo/elegant-man-with-thumbs-up_1149-1595.jpg" alt="team member" class="img-responsive"> </div> <div class="team-hover"> <div class="desk"> <h4>Hello World</h4> <p>Let me introduce myself as a hardcore Web Designer.</p> </div> <div class="s-link"> <a href="#"><i class="facebook"></i></a> <a href="#"><i class="twitter"></i></a> <a href="#"><i class="google-plus"></i></a> </div> </div> </div> <div class="team-title"> <h5>Tracey Moir</h5> <span>HR Manager</span> </div> </div> <div class="col-md-4 col-sm-4"> <div class="team-member"> <div class="team-img"> <img src="https://image.freepik.com/free-photo/well-dressed-executive-with-crossed-arms_1098-3930.jpg" alt="team member" class="img-responsive"> </div> <div class="team-hover"> <div class="desk"> <h3>I love to help</h3> <p>Let me help you get this project started right!</p> </div> <div class="s-link"> <a href="#"><i class="facebook"></i></a> <a href="#"><i class="twitter"></i></a> <a href="#"><i class="google-plus"></i></a> </div> </div> </div> <div class="team-title"> <h5>Mark davis</h5> <span>Marketing Manager</span> </div> </div> </div> </div><!-- end Our Team--> <div id="tetimonialSlider"> <ul id="tetimonialInside"> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> </ul> </div><!-- end Testimonial Slider--> <ul id="navigation"> <li><a href="#one">1</a></li> <li><a href="#two">2</a></li> </ul><!-- end Tesimonial Nav--> <div class="slidercss"> <div class="clientsInner"> <div> <div class="ourClients"> <ul class="clientsInner"> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> </ul> </div> </div> </div> </div> <div class="ourClients"> <ul class="clientsInner"> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> </ul> </div><!-- Clients Logo slider--> </body> </html> |
  |
 
|
| Christian J |
Sep 18 2017, 12:38 PM
Post
#2
|
|
.  Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
What does "symmetric" mean in HTML?
 CODE <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1" > The above code formatting looks a bit odd, but that's up to you. CODE <!-- HTML 5 validation kvetches about projection,tv; **** that noise! --> Agreed, I think. CODE </head><!-- End of my header --> I'd say the </head> end tag is self-explanatory... CODE <ul> <li>Home</li> <li>About</li> <li>Services</li> <li>Case Studies</li> <li>Contact</li> <li>Blog</li> </ul> Shouldn't those menu items be links? CODE <h2>Need online marketing & media design?</h2> It's good practice to use an HTML entity for ampersands. CODE <p>We design, develop and market your website online,</p> <p>To conquer <strong>social media, and search results!</strong></p> Not sure if two Ps are needed, and is the STRONG meant for structure or presentation? CODE <form action="seoformprocessor.html" method="get"> <fieldset> <legend>FREE SEO REPORT</legend> <p>Business Name <input type="text" name="bussinesName" /></p> <p>Website <input type="text" name="website" /></p> <p>Social Media <input type="text" name="socialMedia" /></p> <p>Phone <input type="text" name="phoneNumber" /></p> <p>Project Details <textarea rows="4" cols="50"></textarea></p> </fieldset> </form> The form lacks a submit button. CODE <a class="seoctaButton" href="#">FREE REPORT!</a> The above link doesn't work. CODE <ul> <li>Pittsburgh</li> <li>Greensburgh</li> <li>Fox Chapel</li> <li>Allentown</li> </ul> Not sure what the purpose of the above list is. CODE <div class="s-link"> <a href="#"><i class="facebook"></i></a> <a href="#"><i class="twitter"></i></a> <a href="#"><i class="google-plus"></i></a> </div> The links lack URLs, there is no link text, and I don't know if the I element is appropriate there (see also https://www.w3.org/TR/2014/REC-html5-201410...l#the-i-element ). CODE <ul id="tetimonialInside"> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> </ul> Consider using more descriptive ID values. Also the list makes no sense without javascript. CODE <div class="slidercss"> <div class="clientsInner"> <div> <div class="ourClients"> <ul class="clientsInner"> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> <li><span>Image here</span></li> </ul> </div> </div> </div> </div> Do you really need four nested DIVs, and SPANs inside the LIs? I also found some typos and grammatical errors. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 19th April 2024 - 06:13 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC