I have the following html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN" "http://www.w3.org/MarkUp/Wilbur/HTML32.dtd">
<html xmlns="http://www.w3.org/MarkUp/Wilbur/HTML32.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body style="margin-left: 5%;">
<a name="pagetop"></a>
<a name="firstpage"></a>
<div>
<h3>Content to read I</h3>
<p>
Content to read II<br><br>
</p>
<img src="abc.svg" width="200" height="166" alt="">
<br><br>
<h4>Code:ABC</h4>
<!-- End Buttons -->
</div>
</body>
</html>
I want to read the content between the 2 tags < p > (without < br >) and < h3 >
Is there some standard available in lets say boost for achieving the same?
Related
I am trying to display a PDF page from within the 'document.HTML' page
The file structure is
1.Client2--> catalog --> Static --> catalog --> my css files etc
Client2--> catalog --> Templates --> catalog --> images (pdf's in here) & all my .HTML files
The pdf's are referenced as src..{images/..pdf} etc
The document HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
</head>
<body>
<!-- Type is pdf and is located in the documents.html directory aka (catalog) but within a sub-folder 'images'-->
<embed type="application/pdf"
src="images/Logs_Guide.pdf"
width="250"
height="200">
<embed type="application/pdf"
src="images/AD_Guide.pdf"
width="250"
height="200">
<img src="images/ER_Diagram.jpg">
</body>
</html>
But when I try it within the Django front end and click the pdf I get
"GET /catalog/documents/images/Logs_Guide.pdf HTTP/1.1" 404 3366
So documents HTML is loading static, meaning all files within the
static directory are loading
However, the images folder, where the PDf files are stored are
within templates/catalog/images
So I would need to move this folder within static/catalog/images and
then can change the source to:
This is load static and find the file within the (step 3) file path
And replace (below code) snippet and update to the documents.html
<embed type="application/pdf"
src="{% static 'catalog/images/Logs_Guide.pdf'%}"
width="250"
height="200">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
</head>
<body>
<!-- Type is pdf and is located in the documents.html directory aka (catalog) but within a sub-folder 'images'-->
<embed type="application/pdf"
src="images/Logs_Guide.pdf"
width="250"
height="200">
<embed type="application/pdf"
src="images/AD_Guide.pdf"
width="250"
height="200">
<img src="images/ER_Diagram.jpg">
</body>
</html>
I am using Yeti Launch and I want to use expressions to display page information on each page.
For example, I want to display the page title and some other content specific to that page.
So the homepage would be {title: "homepage"} but I can't figure out how to have the foundation project print/display this.
Here is how I have my homepage file
{{!-- This is the base layout for your project, and will be used on every page. --}}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
<link rel="stylesheet" href="{{root}}assets/css/app.css">
</head>
<script>
var context = {title:"Homepage | Hey this is working"};
</script>
<body>
<div id="siteContainer" class="cover">
<div class="row">
<header>
<h1>Example</h1>
</header>
</div>
<div id="navigation">
<!-- eo // navigation -->
<section id="contentWrapper">
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}} {{> body}}
</section>
<!-- eo // section -->
</div>
<!-- eo // siteContainer -->
<script src="{{root}}assets/js/app.js"></script>
</body>
</html>
How foundation sets up the project folders
src
assets - /img/ - /js/ - /scss/
data
layouts
pages
partials
styleguide
Where should my data be stored? and How do I display or make the call to pull the data to that particular page?
Thanks!
Found the answer.
I have to define my variables at the top of the page template.
I was doing it wrong. I was adding my variables to the partial file instead of the the page template.
Reference:
http://foundation.zurb.com/sites/docs/panini.html#custom-data
http://jekyllrb.com/docs/frontmatter/
I want to separate html code from my laravel template (*.blade.php) file . I have following code in my dashboard.blade.php template :
<h1>Dashboard</h1>
<p>Welcome to your Dashboard. You rock!</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
I want to separate this html code from here and want to move it to another file , with extension either *.html or *.tpl or any other except *.php .
Is it possible to do so ? Please help me on this .
Thanks.
I don't see anyone 100% decoupling HTML/CSS, but you can follow some Design Patterns, like Presenter, and use Laravel Blade so it be very little coupled.
Name a view home.blade.php and add your code to it and change your code to:
<h1>{{$pageTitle}}</h1>
<p>{{$welcomeMessage}}</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
Create a route using:
<?php
Route::get('/', function() {
return View::make('home',
array(
'$pageTitle' => 'Dashboard',
'welcomeMessage' => 'Welcome to your Dashboard. You rock!'
)
);
});
See? It's almost 100% decoupled, but you cannot decouple 100% or you'll not be able to show your dynamic data in your final HTML.
Also, Blade helps you organize your code, so you can have a layout, let's call it layout.blade.php:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title> Your Application </title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
</head>
<body class="">
#yield('contentSection')
</body>
</html>
You have one single line of Blade in it, just to add your page contents, now you can create your home view as:
#extends('layout')
#section('contentSection')
<h1>{{$pageTitle}}</h1>
<p>{{$welcomeMessage}}</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
#stop
And blade will render this HTML for you:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title> Your Application </title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
</head>
<body class="">
<h1>Dashboard</h1>
<p>Welcome to your Dashboard. You rock!</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
</body>
</html>
I can't figure out how to include a piece of HTML (say a little table) in each of the pages of my web app.
Say this is the table I want to include, so I made a template:
<?xml version ... ?>
<!DOCTYPE ...">
<html xmlns="... all the required namespaces ...">
<head>
</head>
<body>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
then I have the code that uses it:
<?xml version ...?>
<!DOCTYPE ...">
<html xmlns="... all required namespaces ...">
<body>
<h3>Will this be displayed?</h3>
<ui:composition template="tableTemplate.xhtml">
<h4>Will this?</h4>
</ui:composition>
</body>
</html>
the page that I get on the browser is:
<html xmlns ...>
<head>
</head>
<body>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
so there is the table but all the rest is missing!
In the master template, you need to use <ui:insert> to declare the place where the template definitions will be inserted.
template.xhtml
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<ui:insert name="body">Default body</ui:insert>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</h:body>
</html>
In the template client, you need to use <ui:define> to define the template definitions which are to be inserted in the places declared in the template.
page.xhtml
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:define name="title">
Define your page title here
</ui:define>
<ui:define name="body">
<h3>Define your body content here</h3>
<p>Blah blah</p>
</ui:define>
</ui:composition>
No HTML around <ui:composition> is necessary. They will be ignored anyway. Just don't put any HTML there, that's only waste of space and confusing for yourself.
When you open page.xhtml in the browser, the following will end up in the rendered output:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Define your page title here</title>
</head>
<body>
<h3>Define your body content here</h3>
<p>Blah blah</p>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
TRY
<ui:include src="tableTemplate.xhtml"/>
and in your tableTemplate.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
put your template here
</ui:composition>
When using the development server along with a view and template html file (which both seem to be formatted correctly), Django's server doesn't make the html from the template the source code to the web page like it should, but instead it seems to just render the template as if it were the thing that I wanted to show on the page. So it seems to create it's own html with my template file being the text that should be printed. For example, here is the view and template and resulting source code from the web page when run on the development server.
View:
def start(request, ampCode):
t = get_template('code_user.html')
c = Context({'user_code': ampCode})
html = t.render(c)
return HttpResponse(html)
Template:
{% extends "base_code_user.html" %}
{% block title %} This is the title {% endblock %}
{% block body %}
<b> {{user_code}} </b>
{% endblock %}
Other template that other one extends:
<!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" xml:lang="en" lang="en">
<head>
<title> {% block title %} {% endblock %} </title>
</head>
<body>
{% block body %} {% endblock %}
</body>
</html>
Resulting source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="1038.35">
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Courier}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Courier; min-height: 14.0px}
span.Apple-tab-span {white-space:pre}
</style>
</head>
<body>
<p class="p1"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="1038.35">
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Courier}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Courier; min-height: 14.0px}
span.Apple-tab-span {white-space:pre}
</style>
</head>
<body>
<p class="p1"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</p>
<p class="p1"><span class="Apple-converted-space"> </span>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p>
<p class="p1"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></p>
<p class="p1"><span class="Apple-converted-space"> </span><head></p>
<p class="p1"><span class="Apple-tab-span"> </span><title> This is the title </title></p>
<p class="p1"><span class="Apple-converted-space"> </span></head></p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-tab-span"> </span><body></p>
<p class="p1"><span class="Apple-tab-span"> </span><span class="Apple-tab-span"> </span></p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-tab-span"> </span><b> AAAAAA </b></p>
<p class="p2"><br></p>
<p class="p1"></p>
<p class="p1"><span class="Apple-tab-span"> </span></body></p>
<p class="p2"><br></p>
<p class="p1"></html></p>
</body>
</html>
Maybe I'm just not understanding what the template system does and it may be working correctly, but I was under the impression that whatever was in the template would become the resulting source code for the page. Any help on what might be causing this would be helpful. Thanks
Edit:
When I try your exact example in a django project it works for me (same view names, same template names). Output (assuming ampCode is 3):
<!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" xml:lang="en" lang="en">
<head>
<title> This is the title </title>
</head>
<body>
<b> 3 </b>
</body>
</html>
My guess is your problem is somewhere else and not to find in your code samples. Maybe you have problem in your URL conf pointing to a totally different view?
Previous answer:
In your view add themimetype to your HttpResponse:
return HttpResponse(html, mimetype='text/html')
If not it will interpret it as text/plain by default and therefore not render the html correctly.
If you want to keep things shorter when rendering templates you can simply use the response shortcuts. Have a look at Django shortcut functions.