I am having a hard time understanding the layout of HTML. In particular, none of the book or exercises I read went into detailed description about what div is actually for or how to visualise it when designing or building a website.
I am just starting out on HTML and I am trying to build pages like these below:
http://activatedrinks.com/index.php/fr/#/activate
http://www.captaindash.com/captain-dash-english-version
I understand I'd have to go into JS and Bootstrap but I just want to ask any experienced mentor here what is the best and easiest way to visualise the layout/structure of HTML when building them? Also if anyone could elaborate on the relationship of them as well would be helpful.
The <div> tag defines a division or a section in an HTML document. Dividing or subdividing a page into many sections or functional blocks. The <div> tag is used to group block-elements or use as a container for other HTML items or elements to implement CSS styles to many elements at once.
To understand more get additional information I recommend the following sites for you to visit:
https://www.lynda.com/
https://thenewboston.com/
http://htmldog.com/
http://www.codecademy.com/
https://teamtreehouse.com
https://css-tricks.com/
https://tutsplus.com
https://www.smashingmagazine.com
https://www.sitepoint.com/
https://www.tutorialspoint.com/
https://www.w3schools.com/
http://www.html-5-tutorial.com/div-tag.htm
In addition try to understand different Frameworks (Front-End or Back-End) at http://tutorialzine.com/2016/12/the-languages-frameworks-tools-you-should-learn-in-2017/. "Although frameworks makes programming faster and easier, unless you know how they works, they may become more of a problem than being helpful" by Tesseract.
Related
I have been using the P tag for each html form filed element row but in twitter and facebook they use table for designing a form and linkedin uses ol tags for each html field rows. Ebay uses div tags.
Please suggest a best practices to develop an html form.
Whatever technique you use, make sure you are 100% compliant with a tool like this.
There is no best practice on this issue. Just use whatever feels more convenient for your current page layout.
A good table-less result is a little hard to obtain (you need to know very well how positioning works, and there are several issues concerning different browsers implementations), but the code results more comprehensible and more maintainable. Moreover DOM manipulation is faster (there are tons of things to say about it... :) ).
Table layout is easier to obtain and it's a more "natural" way to imagine columns, rows and stuff inside them.
By the way, concerning a simple structure like a form, it really doesn't matter what kind of technique you use!
There is a huge debate / gap in opinion on this subject, whether to use tables or not? And to be frank the arguments on both sides here are compelling however the decision firmly rests with the designer / developer.
If you use Tables then you know that as far as positioning is concerned you can control your for elements easily and indeed apply CSS to the tables if you want them to look awesome.
If you use CSS the feeling is your more likely to have better validated code and be 'Future Proof' and again styling can be picked up from centralised styles such as fonts etc for your P tags.
Personally I make the decision based on a few elements...
Does CSS offer me the control I want for my form in this sites context?
Can I ensure that my CSS (if used) is cross browser compatible?
3 Do I care? Tables have been around for years so why not use them!?
Do I have a specific brief asking for table-less design?
See this article it may help Iron Spider - Tables vs CSS
Sorry not to be more specific and good luck!
I want to design my webpage layouts only using div tags. But i'm not good at it. I need to understand the basic techniques to build re-sizable websites.
Can you suggest some good tutorials/ tips to kickstart.
There are not many better frameworks for liquid layouts than http://cssgrid.net/
It isn't so much a tutorial as it is a starting point for pre-designed websites, but works wonders in helping you understand building sites for different screen sizes (all the way down to phones).
Check out this link as well for testing purposes - http://www.resizemybrowser.com/
There are many sites with tutorials which cover this. Here are a few I would recommend you checking out:
http://www.colorplexstudios.com/articles/div_web_design_tutorial/
http://www.mardiros.net/liquid-css-layouts.html
Also try looking for tutorials on fluid/elastic layouts if you want dynamic/resizeable designs using div tags and css.
I know that you're asking how to get started understanding CSS-based layout.
I'd like to point out at this early stage that DIV tags simply serve as containers which have no semantic meaning. While they sometimes help with layout, you can often achieve the same results by thoughtful styling of the HTML elements themselves.
For instance, a UL is a block-level element and CSS treats it exactly the same as a DIV in that respect.
I strive to use a few DIV tags as possible in my layouts, preferring instead to exploit the box model of the HTML elements. This minimizes variables and results in much cleaner, more maintainable code for the future.
As you learn, get in the habit of working without DIVs where possible. You'll understand the HTML and the CSS much better in the long run.
Is knowledge of HTML beyond the basics a prerequisite for learning CSS?
I am making a learning plan so this will help me evaluate the time required better.
Is knowledge of HTML beyond the basics a prerequisite for learning CSS?
Absolutely. You won't be able to use CSS in a practical way if you don't know your way around the HTML elements to apply them to.
I'd say learn them both parallelly. Understand the basic HTML syntax and structure first; then start with CSS.
Whats the use of CSS if you don't know HTML?
So better get a good understanding of HTML first and then study CSS.
You can learn CSS from scratch, only basic HTML is needed to allow you to start! Good luck, w3schools.com is an excellent reference site and learning tool for HTML/CSS.
Good question. I'd say technically speaking you don't really need to know HTML if you're absolutely only going to work in CSS (styling somebody else's HTML), but you do need to know about the DOM structure and box model. As pertains to CSS, the DOM and HTML are so closely related as to be virtually indistinguishable. If you know enough about the DOM structure to be able to code CSS, you pretty much automatically know HTML with it.
This almost like asking if you can be an interior decorator without knowing what a house is or the different kinds of rooms.
The whole point of CSS is to make HTML look (and sometimes act) better.
It would be silly to use CSS to create indented lists, and only then discover the <ul> tag.
Or worse, I've seen people spend weeks trying to use CSS to put data in a grid, when one simple <table> tag did the trick. ;-)
Its better if you will go with HTML first, anyways it won't take much time, atleast you should have a basic idea about HTML, then you can easily move in CSS. Anyways CSS is nothing but the style sheet.
I know that is a very embracing question, but I have just started with Ruby on Rails, and still have a long way with CSS and HTML.
There are lots of books about CSS and HTML patterns, but I would like to know what is really applied to actual webpages.
For example, what's the best way of doing a simple webpage with a lateral menu, a logo on the top, and some text below?
Ok, it seems stupid, but there's lot of ways of doing that, or not ?
So, how can I learn this patterns and what are the real patterns ?
Would appreciate suggestions of books, articles, etc.
you can find some good css templates here:
http://www.csszengarden.com/
Actually in html and css there are not patterns in the oo sense.
I find this tutorial very useful:
Design and Code your first website
The nettuts website has a lot af very good free tutorials.
A very good book to begin is:
Head First HTML with CSS and XHTML
It varies from developer to developer. So I'll just tell you what I'm doing!
I'm actually following a very common pattern - separate ANY layout from the contents!
Into the HTML goes...
Text
<div/> containers with IDs to be layouted
And in the CSS goes...
Layout for the ID'd and class'ed <div/> layout containers
Colors, Background images
Fonts
It allows to rapidly change the whole page design without even touching the HTML! And it decreases both your server's traffic and the load time on the client pages, because the CSS file can be cached, since it does not change as much as the HTML does!
The CSS Zengarden nate posted is a very nice example of this pattern. The same unmodified HTML with dozens of CSS files with totally different looks!
This pattern also allows the same unmodified HTML to be displayed with automatically selected CSS files on huge displays, on small netbooks and on mobile devices. Can't be any better if you ask me!
You might want to check out some CSS libraries.
I don't personally like using them because I have ways that I like to do things and sometimes they aren't flexible enough for what I want to do. But since you're just starting out they might help you get something that looks good up really fast without having to worry about float drop bugs or margin collapsing or any other CSS quirks that are easy to hit but hard to recognize if you haven't seen them before.
An example would be the Yahoo User Interface (YUI) Grids CSS that will help you set up many different kinds of grid layouts. To find more, I would search for "css framework" or "css library".
Another YUI resource I think would be really useful for you would be their design pattern library, which documents different ways to display common interface items and gives you resources to go implement them. This can help make your interface look familiar to users and can keep you from feeling like you have to redesign a drop-down box or something.
The rule of thumb should be to do all design in CSS and HTML is just HTML without calls to design. That way, like referenced above, you can change design rapidly.
A good reference for how this works is the Zengarden CSS site at: http://www.csszengarden.com/
This is a site I used often as I learned the ins and outs of CSS design.
The Separation of Layout and Content is the domain of CSS and HTML - so far well understood. Now about separating...
I'm looking for hints and Best Practices to get started with the task of providing a "skin" or "theme" for a content management system.
Background:
We are starting to embrace a Portal Server/Content Management System and are starting to change the look and feel to match our needs.
Our designer has so far mainly worked with full control over HTML and CSS, tweaking either one in order to get pixelperfect layout. With adoption of the cms there's a lot precreated HTML (very semantic, almost no tables :) that needs to be skinned with CSS and Images. Though it is possible to change the HTML fragments, I'd prefer to do so only as a last resort.
As this provides the challenge of "how to get started" my question is about any tipps how to proceed or articles that can help managing or organizing this task - e.g. best practices in designing, how to slice this task or what tool to use.
It seems bad practice to just save a dynamically generated page to disk and make changes locally. This would be somewhat ok for the CSS files but changes to HTML elements must be retrofitted to the fragments that they are generated from. I'd like to keep this out of the designer's realm if possible. Also, the thought of Dreamweaver (or any similar tool) making implicit tweaks to the HTML structure is frightening for me.
For the curious: The mentioned CMS/Portalserver is Liferay, but the question is really language- and tool-agnostic.
Edit: FireBug (as Josh suggested) is awesome for trying on-the-fly changes to css. Is there more - either in the area of tools or in-process and self-organization?
If you're looking for practical examples of separating style and content, then I'd suggestion the CSS Zen Garden. Trawling through the HTML and CSS is inspirational and enlightening and should help with what you're trying to do.
My #1 tip would be be to make everything as semantic as possible and use lots of classes and ids to hook your styles onto.
Usually, Whenever I am in a situation Like this, I bring up the page in FireFox, inspect the different elements using FireBug and see exactly what css is applied to them. THen I'l just modify the existing css until I get what I like. You can even play around in firebug and modify the CSS without "saving" those changes.
Have look at CSS Tidy, we normally use this to clean up the CSS and reorganise for development and production. However, I personally prefer writing HTML/CSS by hand before using this. It is just a matter of individual preference I guess.