how do i get the html and style of this view? - html

i'm a beginner in web programming, and i need to create a web site for a school project.
In my website i want to have this view:
that i saw on a website.
how do i get the html of that?

Use your browser's tools!
First, as you mentioned "views" – "views" don't exist in HTML. But there are tags. Common tags are ..., <strong>bold text</strong>, <div>...</div>, ... What you want is to grab a tag with several child tags.
In Firefox, there's a tool called Page inspector. It'll let you inspect the site's source code interactively (e.g. you hover over a tag and it'll be highlighted). With that, you can easily find the needed HTML tags. But you also need the CSS styles for each tag. If you click on a tag, the CSS styles are shown on the right. You have to copy them to your stylesheet and maybe you'll have to modify them to match your different HTML structure.
There's something similar in Chrome, too.
But please note that it's not very nice to simply copy-paste this code without modifying it. It's a good idea to discover how you can do something like this, but I strongly recommend to change it, to have something own!

Related

Relation / difference between HTML and CSS

I have used HTML in its basic form, and I mainly work on "server side" (of Enterprise application, mainly based in Java EE).
From what I understand, HTML is the "pages" which we see in an browser (that source code which a GUI developer writes and which a browser renders appropriately).
For example in an HTML tag, we write "h1" element, and the browser displays the text within as bold.
Now why there is any need of css? From what I am aware of, CSS is used to give "style" to a html page. The confusion that I have, doesn't HTML in itself able to give the style? what were the compelling reasons for creation of css?
Can anyone help me understand this in simple words.
The code that you put in your html to style it is actually CSS. HTML actually has some built in CSS. So really, you are using CSS when you do that. Also people like to connect a separate file for CSS in bigger projects. It looks more organized, and it easier to keep track of. It is also easier to code the CSS, because it is less messy and it seems like you have a bit more functionality. In conclusion, the code in the html that you are using to style with, is actually CSS, just built in. Also, I would highly recommend separating your stylesheet and HTML file(the stylesheet is CSS). If you need help, go to codecademy and create an account. Take the HTML and CSS lesson. I found this very useful and is where I learned most of my knowledge. I would highly recommend going to that site also. The site is also free.

Insert .css into HTML on omeka

Hi I am working on building a webpage using omeka. I am working in a simple page that automatically creates HTML code. It generates this code based on the theme you select. The site has the ability to edit the css through an extension of the site. However, with the theme that was desided for the site you cannot use the css editor to format the page. You have the ability to add html short codes. I would really like to reformat the text and the background for this page in particular without changing the settings for the rest of the site. A way to do that is by inserting css code into the html. The problem is I am not sure where to insert the code at.
Here is an example:
click to see
(sorry if images are poor quality)
Where would I insert the suggested css
When I do this it changes either the alignment or text color but it will not do both. What am I doing wrong and how can I fix this? I am fairly new to coding and most of my expierence is working with css not html.
<p style="text-align:justify; color:blue;"></p>
According to your example, you're adding another style attribute inside of your p tag. That will not work. You need to separate your styles with a semicolon.

Very basic vertical menu in pure html5 and css

I've been googling for quite a bit and can't find anything that helps me put all the pieces together here. My specs are as follows:
Have three files: index.html, menu.html, and style.css
The menu.html has all the content needed for my menu, and is included by index.html via html5 objects. I understand objects can be used like this: Include html file in html using html5
style.css can have be very very minimal. Maybe just blue text on a red background, as an example.
What I have managed to accomplish:
Getting the text from menu.html to show up in index.html
My issue is just putting all the pieces together. If someone could help provide the needed lines for index.html (ie, an object tag that correctly references the style) and a very minimal style.css, I would be all set.
Thanks for the help, and sorry for the n00b question, but I can't seem to find anything on the combination of html5 objects and css.
index.html:
http://pastebin.com/xn2PNAsS
menu.html:
http://pastebin.com/A72csf14
style.css:
http://pastebin.com/QXxwbpyq
What is broken:
I just can't get the object only (the menu) to use the style sheet and have a red background. For the main page I would like to have a white background.
Clicking on a menu link seems to open the page in a new frame. I want the entire page to change. The reason for having a menu.html is to stick with the DRY paradigm.
Have you tried something like this?
<object type="text/html" data="menu.html" id="whatever"></object>
In style.css
body {
background-color: #FFFFFF;
}
#whatever {
background-color:#ff0000;
}
In menu.html use target="_top" on your links, from http://www.w3schools.com/tags/att_a_target.asp ie,
Home
Props for wanting to keep it DRY. If you want to include those sorts of common components, however, and you want to do it cleanly, you may need a lot more than HTML and CSS. You would need a programming language (and possibly a web app framework) that you could use to generate the common elements. Popular options are C#/ASP.NET, Python/Djano, Ruby/Rails, and PHP/Zend or Cake.
However, I can't really tell you exactly what you need because I don't know what kind of site you want to make, or how big of a project it is. You may just be able to get away with server-side includes, which is probably the easiest option.

WYSIWYG editor override page css?

I have a web application that allows the creation of HTML emails that can then be dispatched. Because of how fiddly HTML email display can be, I have an open-source WYSIWYG editor embedded.
The editor itself works fantastically, but with one problem that you may already be thinking. Basically, the page CSS is conflicting with the inline CSS generated by the text editor, which caused issues for things like tables.
Currently I am solving this on the "preview" page by placing the preview in an iframe but I am not entirely sure the best way to do this for the actual editor page. If I do it in an iframe, I would either have to put it into a separate page and alter the process slightly, or write some Javascript to strip the HTML out of the iframe on form submit.
It seems like there should be an easier way - has anyone solved this problem before?
Thanks.
I would switch to a different editor like CKEditor or TinyMCE that allows you to edit the whole HTML by using themselves an iframe for the edited contents. That way you can edit exactly what you will send.
One example: http://nightly.ckeditor.com/latest/ckeditor/_samples/fullpage.html
Change how you are targeting your selectors. If you have conflicts, then your CSS is not written efficiently.
Maybe use a root div with a specific ID and have everything cascade off of that.

MySpace DOM?

I've been given the task of doing some work customizing an artist's space in MySpace. It seems that you sort of hack the HTML you want into your edit profile page (which has several empty boxes). The MySpace page, it seems, is already HTML so you can only hack into that. Suggested "tweaks" include incomplete HTML code (e.g., a <DIV> tag without a </DIV> tag to supress certain sections) and stylesheet pieces that you can "place anywhere" (meaning somewhere on your edit profile page). And the best one is that sites that offer layouts say, "Layout Code - Copy and Paste the code at the bottom of your 'I'd Like to Meet' Section!"
This cannot possibly be this lame, can it?
Is there any coherent guide to customizing MySpace pages for programmers/HTML designers? Is there a coherent DOM (including things like .contactTable etc.)? Could it be that all the tweaks are just hacks people have figured out from looking at the generated HTML?
Thanks!
This shouldn't be too hard if you whip out Firebug and do a bunch of "Inspect > click on page > edit CSS in Firebug's editor" work to see what you can learn about the structure of the page. Then mock it up to roughly how you want it and note down which elements and which styles need work and figure out how to get that set up in the profile editor.
Try approaching this from the point of view of a challenge. On the upside, MySpace allows you access to the DOM so you can screw with all sorts of things. On the downside, their choice of HTML composition is somewhat arguable.
You hit the nail on the head with your final question. The MySpace DOM is a disgusting set of nearly-infinitely nested tables. Normally, people edit the page by finding those sites that let you "cut and paste" and use their generated CSS since they've already done the hard work for isolating the proper elements.
Good luck... unfortunately, you are really going to need it. =/
Your fears are correct. MySpace "customization" is a bunch of hacks. Good luck.
You can a lot of information in this link: http://spiff-myspace.blogspot.com/
I think the same of the others answers: customize MySpace page is a difficult and complex task.
Regards,